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

【问题标题】：How to prevent increase of table cell while nesting input tag?嵌套输入标签时如何防止表格单元格增加？
【发布时间】：2018-02-24 10:30:22
【问题描述】：

我按条件嵌套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标签的表格单元格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，请看。

【问题讨论】：

检查输入的最小宽度。
@lexith 我应该为min-width设置什么值？
我可能会将宽度设置为 100%，将最小宽度设置为 0
@lexith 设置 min-width:0 不会阻止调整大小。
Mhhhh，你能提供一个小的可重现的 plunkr 吗？因为我经常遇到这种行为，而且总是 minWidth 问题，所以我猜。

标签： html angular html-table tablecell

【解决方案1】：

试试这个：

<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>

【讨论】：

【解决方案2】：

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

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

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

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

我稍微调整了您的plunkr，作为您如何做到这一点的示例。

希望对你有帮助。

PS：我提到的min-width 问题是我认为的引导程序问题，无论如何它只有在您实际设置宽度时才重要，在这种情况下将 min-width 设置为 0 以覆盖引导程序默认值。 em>

【讨论】：