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中无法正常运行

我创建了小提琴 - http://jsfiddle.net/6g4fmu5r/来演示这个问题。

Answer 1

您可以在此帖中看到，在Firefox和Chrome上，边框折叠功能不同： Border Collapse differences in FF and Webkit

在Firefox中，边框仅在两侧，表格上下左右。如果你检查，你会看到该表有804宽度+ 1px边框左。 OuterWidth包含边框，因此对于所有td，你将从右边有114 + 1px。

在Chrome中，td在所有方面都有1px但是叠加（桌面上为0）。表也减少到804宽度，但没有添加边框... 因此Chrome需要减少1 td才能获得正确的宽度。

Answer 2

在测试了很多东西后我得到了解决方案..

请替换此代码

table {
    border-collapse: collapse;
    width: 805px;
    table-layout: fixed;
}

到这个

table {
    width: 805px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

你将获得所有相等的宽度td ..：）

参考：Help

表格单元格与表格布局的宽度不相同：固定

2 个答案: