css - 当我向表格单元格动态添加元素时，如何计算 "width: 100%"？

Question

Backgrid 允许编辑表格中的值，并通过放置一个 <input type="text"> 来实现。在<td>里面.输入设置为 max-width: 100%但在某些情况下，它仍然会将列的大小推得更远。

例如，参见网格 on their Examples部分，然后单击“人口”列中的一个元素。当它得到 editor类，它的填充设置为 0，<td>和 <input>有box-sizing: border-box , 但列的宽度仍然增加。

width: 100%也是如此并不意味着 <td> 宽度的 100%和当时一样吗？还是仅仅使用 CSS 就不可能完成这项工作？我可能可以使用 Backbone 事件来获取 td 的大小，然后将输入设置为相同的大小，但这听起来有点老套。

Answer 1

表格列宽的计算方式并不简单。他们尝试以一种方式在列之间分配可用空间，即内容越多的列获得更大的份额。

如果您说“内容应该与列一样大”，您会使事情变得更加复杂，因为您在内容宽度和列宽之间创建了循环依赖关系。

So does width: 100% not mean 100% of the width of the <td> as it is at the time?

没有。当有任何变化时，一切都会更新。 CSS 不保留历史记录，因此它不知道特定时间元素的宽度。所以width: 100%意味着在更新所有内容之后，输入将具有与 <td> 相同的宽度.但这可能与更改前有所不同。

对于您的问题，我没有完美的解决方案，但这些是一些想法:

• 在使用 JavaScript 替换内容之前检查列宽(如您在问题中所述)
• 使用fixed table layout .这样所有列的宽度都相同，并且不会根据其内容而改变。
• 设置 contenteditable 在 <td> 上而不是使用输入元素。这应该不会影响列宽 - 至少只要您不实际编辑内容就不会。