Question

当执行某个用户操作时，我需要在每个单元格中包含<input>的表中添加一行。我需要<input>来自动填充可用空间，而不会影响列宽。

我需要从这开始：

最后得到这个：

但是，当我插入输入时，每列延伸到最小值~170px（取决于浏览器）：

简化演示：http://codepen.io/patik/pen/qZXMyL - 单击底部的按钮，注意插入输入后如何保留原始列宽。

我可以在插入输入之前读取列宽，然后手动将max-width应用于每个输入，但是我希望列保持流畅（也就是说，列应该继续调整以适应纯文本数据）。可以在表格中添加或删除其他行，我需要相应的输入进行调整。

正如您在演示中看到的那样，我已经尝试创建<td><div><input></div></td>结构，希望<div>填充列，而<input>会填写<div>，但似乎并非如此。

我更喜欢CSS解决方案（即使我需要在插入输入时应用内联样式）但如果它是唯一的选择，我可以使用JavaScript解决方案。< / p>

Answer 1

尝试将此添加到您的CSS代码中：

input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

<强>含义：

input[type="text"]仅选择文本类型的输入框。

width: 100%宽度占据父级可用宽度的100％。

box-sizing: border-box使宽度也计算边框。

Answer 2

如果要使用CSS控制宽度，<input>必须具有size属性：

<td><input size="1"></td>

size的值并不重要（虽然它确实需要一些价值 - 你不能简单地写<input size>并让它工作）。只要该属性存在，该元素似乎尊重我应用于它的任何CSS。在这种情况下，width: 100%可以解决问题。