自动表格布局和 colspan

Posted 2023-03-05

【中文标题】自动表格布局和 colspan

【英文标题】：Automatic table layout and colspan

【发布时间】：2011-08-24 13:33:49

【问题描述】：

我正在创建一个应用程序，它允许用户通过添加和删除列和行、设置列宽和单元格跨度以及将元素插入表格单元格来操作表格结构。在测试时，我遇到了一个场景，其中 Firefox 4 和 Internet Explorer 8 以我期望的方式呈现表格，而 Google Chrome 11 没有。我正在使用 table-layout: auto 并且我知道 CSS 没有指定在这种情况下使用的渲染算法（http://www.w3.org/TR/CSS21/tables.html，第 17.5.2.2 节）。尽管如此，如果可能的话，我希望在上述三个浏览器中拥有一致的视图。

这里有一个非常简单的场景来说明不同的渲染（在 Chrome 和 Firefox/IE 中尝试以查看差异）：http://jsbin.com/ayuja4/3

即使表格足够宽以包含蓝色 div（因为第一列设置为 200 像素，而第二列虽然宽度为 100 像素，但必须扩展到 300 像素才能包含绿色 div），在 Chrome 中，第一列的宽度超过了 200 像素。这会导致最后一行出现额外的、不必要的空间，这正是我想要避免的。

有什么想法可以让这个表格在 Chrome 中看起来与在 Firefox 和 Internet Explorer 中一样吗？我不需要纯 HTML/CSS 方法——用 javascript 操作表格是一个有效的选择，如果它解决了我的问题。我已经在考虑使用固定的表格布局，但这会导致处理比列宽的元素需要额外的努力，所以这是不得已的选择。

【问题讨论】：

似乎是 Chrome 中的一个错误，即使 IE 6 也能做到这一点。报告错误，希望他们会修复它，Chrome 用户将获得自动更新（除非您没有连接到互联网，否则无法避免），您的工作就完成了。

我已经通过 Chrome 的错误报告功能报告了它。不幸的是，这意味着我不会收到任何反馈。

【参考方案1】：

如果您将表格内的 div 显示为带有table div display:table-cell; 的单元格，您将获得相同的结果。此外，您现在的做法是留下 1px 的间隙，因为 500px 的元素没有计算出 1px 的边框。

我实际上再次查看了它，如果您使用 min-width 而不是 width 它也会这样工作。

【讨论】：

如果我将“display:table-cell”应用于表格中的所有 div，第一列会扩展超出预期的 200 像素，第二列的宽度会小于 300 像素，因此预期宽度不尊重绿色 div（300 px）的值（演示：jsbin.com/ayuja4/5）。这发生在 Chrome 和 Internet Explorer 中。在 Firefox 中，列的宽度为 200 像素和 100 像素，因此两个 div 都没有考虑其宽度。

如果我应用 min-width 而不是 width，Chrome 仍然无法正确处理，Firefox 和 Internet Explorer 会完全按照我使用 width 而不是 min-width 呈现表格（演示：@ 987654322@)。但是如果我只将“display:table-cell”应用于蓝色 div，所有三个浏览器都会按照我的预期呈现表格（演示：jsbin.com/ayuja4/7），所以这是一个令人满意的解决方案。感谢您的回答！

对不起，我不清楚。我的意思是，如果您将min-width 应用于<th>s，那么您也应该修复它（http://jsfiddle.net/MKGwe/）。很高兴其中一个工作，尽管我的解释很糟糕，哈哈！

确实，这也有效，而且对于我的真实场景来说，它实际上是一个更好的解决方案。再次感谢！