0

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

例如，请参阅其示例部分的网格，然后单击“人口”列中的一个项目。当它获得editor类时，它的填充设置为 0，并且两者<td>都有<input>，box-sizing: border-box但列的宽度仍然增加。

那么不width: 100%意味着 100% 的宽度是当时<td>的样子吗？还是仅使用 CSS 无法完成这项工作？我可能会使用主干事件来获取 td 的大小，然后将输入设置为相同的大小，但这听起来有点 hacky。

4

1 回答 1

3

计算表格列宽度的方式并非易事。他们试图在列之间分配可用空间，以使内容更多的列获得更大的份额。

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

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

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

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

  • 在使用 JavaScript 替换内容之前检查列宽（正如您在问题中已经指出的那样）
  • 使用固定的表格布局。这样，所有列的宽度都相同，并且不会根据它们的内容而改变。
  • 设置contenteditable在<td>而不是使用输入元素。这不应该影响列宽——至少只要你不实际编辑内容就不会。
于 2014-09-24T20:56:10.027 回答