html - 表格单元格的宽度与表格布局 : fixed 不相等

Question

我有一个包含几列的表格。我需要列具有相同的宽度，所以我使用以下样式:

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
td {
    border: 1px solid green;
    box-sizing: border-box;
    padding: 0;
}

它在 FireFox 和 Internet Explorer 中运行良好，但在 Google Chrome v.43.0.2357.130 m 中运行不正常

我创建了 fiddle - http://jsfiddle.net/6g4fmu5r/这证明了这个问题。

Answer 1

您可以在这篇文章中看到 border-collapse 在 Firefox 和 Chrome 上的工作方式不同: Border Collapse differences in FF and Webkit

在 Firefox 中，边框仅在两侧，顶部和左侧的表格完整。 如果你检查一下，你会看到那个表格有 804 宽度 + 1px 左边的边框。 OuterWidth 包括边框，因此对于所有 td，您将从右边开始 114+1px。

在 Chrome 中，td 的所有边都是 1px，但叠加(0 在 table 上)。 表格也减少到 804 宽度，但没有添加边框...... 所以 Chrome 需要减少 1 td 以获得正确的宽度。