javascript - 自动表格布局和 colspan

Question

我正在创建一个应用程序，它允许用户通过添加和删除列和行、设置列宽和单元格列跨度以及将元素插入表格单元格来操作表格结构。在测试时，我遇到了一个场景，其中 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 px，第二列虽然宽度为 100 px，但必须扩展到 300 px 以包含绿色 div)，在 Chrome 中，第一列的宽度超过了 200 像素。这会导致最后一行出现多余的、不必要的空间，而这正是我要避免的。

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

Answer 1

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

实际上我又看了一遍，如果您使用 min-width 而不是 width 它也会那样工作。