我有一个包含很少列的表。我需要列的宽度相等,所以我使用以下样式:
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/来演示这个问题。
答案 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