宽度如何＆＃34;宽度：100％＆＃34;我动态地向表格单元格添加元素时计算出来的？

Question

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

例如，请参阅网格on their Examples部分，然后点击＆＃34;人口＆＃34;中的项目。柱。当它获得editor类时，其填充设置为0，<td>和<input>都有box-sizing: border-box，但列的宽度仍然会增加。

那么width: 100%并不意味着当时<td>宽度的100％？或者只是不可能只使用CSS来完成这项工作？我可以使用骨干事件来获取td的大小，然后将输入设置为相同的大小，但听起来有点hacky。

Answer 1

计算表列宽度的方式并不简单。他们尝试以更多内容的列获得更大份额的方式在列中分配可用空间。

如果您去说“内容应该与列一样大”，那么您会更加复杂，因为您在内容宽度和列宽之间创建了一个ciruclar依赖项。

  

那么width: 100%是不是意味着当时<td>宽度的100％？

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

我没有完美的解决方案，但这些是一些想法：

• 在使用JavaScript替换内容之前检查列宽（正如您在问题中已经提到的那样）
• 使用fixed table layout。这样，所有列都具有相同的宽度，并且不会根据其内容进行更改。
• 在<td>上设置contenteditable，而不是使用输入元素。这不应该影响列宽 - 至少不会影响您实际编辑内容的时间。