嵌套输入标签时如何防止增加table单元格？

Question

我按条件嵌套input标签：

<td *ngFor="let cell of row.Persons">

    <span cell.editable === true ">
        <input type="number" [(ngModel)]="cell.PersonCount" autofocus />
    </span>

    <span *ngIf="cell.editable === false " (click)="toggle(cell)">
        {{ cell.PersonCount ? cell.PersonCount : '-' }}
    </span>

</td>

没有 input 标签的 table 单元格 Person 的宽度如下所示：

并且当 Person 单元格具有 input 标签时：

我试过设置以下样式，但是没有结果：

<input type="number" [(ngModel)]="cell.PersonCount"
       style="display: inline; max-width: 100%; width: inherit; height: 
       inherit;  box-sizing: border-box !important; overflow:hidden;
       -moz-box-sizing: border-box !important;
       -webkit-box-sizing: border-box !important; border: none;" autofocus />

我的问题是 如何保持单元格大小与没有 input 标签（如第一张图片）相同？

我创建了an example at plunker，请看。

Answer 1

问题在于输入本身的维度。 <input> 元素有一个名为 size 的属性，默认为 20，这意味着它的行为完全相同：

<input type="text" />
<input type="text" size="20" />
<input type="text" size="0" />

无论如何，如果您将 size 设置为最小值 (1)，问题仍然存在，因为它仍然是 "hardcoded" 大小并且与任何其他元素无关。

在这两种情况下，唯一的解决方法是为父元素（您的 td）设置一个宽度（静态或动态），并将您的输入设置为 width: 100%。

我稍微调整了你的 plunkr 作为你如何做到的例子。

希望对您有所帮助。

P.S：我提到的 min-width 问题是我认为的 bootstrap 问题，无论如何它只在您实际设置宽度时才重要，在这种情况下将最小宽度设置为 0 以覆盖 bootstrap 默认值。

Answer 2

试试这个：

<td *ngFor="let cell of row.Persons" style="display: inherit;">
    <span *ngIf="cell.editable">
        <input type="number" [(ngModel)]="cell.PersonCount" autofocus style="max-width: 50px;"/>
    </span>
</td>

嵌套输入标签时如何防止增加table单元格？

How to prevent increase of table cell while nesting input tag?

html

angular

html-table

tablecell