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

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>

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

当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），问题仍然存在，因为它仍然是“硬编码”大小而不是相对于任何其他元素。

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

我调整了你的plunkr作为你如何做的一个例子。

希望它有所帮助。

PS：我提到的min-width问题是我认为的一个自举问题，无论如何，只有你实际设置一个宽度才有意义，在这种情况下，将min-width设置为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>