Question

我有一张包含三张<td />的表格。其中两个具有width的{{1}}属性和样式中间0px没有明确的<td />集。

width

我希望这个中间<table cellpadding="0" cellspacing="0" border="0" width="100%"> <tbody> <tr> <td width="0" height="10" bgcolor="" style="background-color:#00ffff;height:10px;width:0px;"></td> <td height="10" bgcolor="" style="background-color:#000;height:10px;"></td> <td width="0" height="10" bgcolor="" style="background-color:#ff00ff;height:10px;width:0px;"></td> </tr> </tbody> </table>会占用整个空间（这就是Firefox和IE中发生的事情）

但是，在谷歌浏览器中，三个<td />占用的空间相同。

1。这是为什么？ 2.这是Chrome中的错误吗？
3.有一个简单的解决方法吗？

Answer 1

看起来Firefox和IE拥有默认属性＆＃34; table-layout：fixed＆＃34;对于表格。但Chrome并不将此作为默认属性。所以我们需要像下面这样强制使用它。

 table {
border-collapse: collapse;
border-spacing: 0;
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-vertical-spacing: 0px;
table-layout:fixed;
}

DEMO

Answer 2

当设置了一些宽度但是它们没有明确定义所有宽度时，浏览器在表中分配列宽一直不一致。

在这种情况下，表格的宽度为100％，其中两列的宽度为0.但是，表格单元格的width设置仅设置<em>最小宽度，浏览器可以分配更宽的单元格（列）以满足整个表格的宽度设置。

这里的解决方案很简单：只需将width: 100%添加到中间单元格的样式设置中。

谷歌浏览器：零宽度表格单元占用空间

2 个答案: