我正在创建一个应用程序，允许用户通过添加和删除列和行，设置列宽和单元格colspans以及将元素插入表格单元来操作表结构。在测试时，我遇到了一个场景，其中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操纵表是一个有效的选项。我已经在考虑使用固定的表格布局了，但这会导致额外的工作来处理比列宽的元素，所以这是最后的手段。
答案 0 :(得分：1)
如果您将表格中的div显示为table div {display:table-cell;}的单元格，您将获得相同的结果。此外，你现在的方式是留下1px的差距，因为500px元素没有计算出1px边界。
我实际上第二次看了它，如果你使用min-width而不是width它也会这样工作。