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

时间:2015-06-24 12:13:22

标签: html css

我有一个包含很少列的表。我需要列的宽度相等,所以我使用以下样式:

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/来演示这个问题。

2 个答案:

答案 0 :(得分: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才能获得正确的宽度。

答案 1 :(得分:0)

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

请替换此代码

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

到这个

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

你将获得所有相等的宽度td ..:)

参考:Help