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

【问题标题】：Google Chrome: Zero width table cells use up space谷歌浏览器：零宽度表格单元格占用空间
【发布时间】：2023-03-02 22:24:01
【问题描述】：

我有一张桌子，里面有三个<td />。其中两个具有width 属性和0px 样式。
中间的<td /> 没有明确的width 集。

JsFiddle here

<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>

我希望这个中间的<td /> 会占据整个空间（这就是在 Firefox 和 IE 中发生的情况）

但是，在 Google Chrome 中，三个<td /> 都占用相同的空间。

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

【问题讨论】：

标签： html css google-chrome cross-browser

【解决方案1】：

看起来 Firefox 和 IE 具有用于表格的默认属性“table-layout:fixed”。但是 Chrome 没有将此作为默认属性。所以我们需要像下面这样在 chrome 中强制执行此操作。

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

DEMO

【讨论】：

在最新的FF中，我只能看到黑色。而在 chrome 中，如代码中所述，我可以看到指定的所有 3 种颜色。有cmets吗？
你是对的 kheema。 OP 想要修复 chrome 问题。
我现在在 chrome 中也看到了相同的行为。我不知道这个 chrome 错误。
浏览器默认没有table-layout:fixed。

【解决方案2】：

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

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

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

【讨论】：