为什么 Chrome 不理解表格单元格的“宽度：50%”？答案

【问题标题】：Why does Chrome not understannd "width: 50%" for a table cell?为什么 Chrome 不理解表格单元格的“宽度：50%”？
【发布时间】：2020-11-22 03:25:08
【问题描述】：

我有一个带有三个标题单元格的可折叠表格，但是当它打开时，下面一行中有四个内容单元格。第一个标题单元跨越两个内容单元。当表格关闭时，我也希望第一个标题单元格的宽度为 50%。使用下面显示的代码，这在 FF 中有效。但是在 Chrome 中，当表格关闭时，三个标题单元格具有相同的宽度。

可以在here 找到该表。该单元格是标记为“6、11”的单元格。

<table class="collapsible collapsed" style="width: 100%;">
    <tbody>
        <tr>
            <th colspan="2" style="width: 50%;">A & B</th>
            <th style="width: 25%;">C</th>
            <th style="width: 25%;">D</th>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>

我的代码或 Chrome 有问题？什么是正确的和两个浏览器都理解的是否存在交集？

【问题讨论】：

你试过table-layout:fixed on table吗？
成功了，谢谢。此外，我不再需要指定宽度。不过，难道不能在 Chrome 中指定单元格宽度吗？
在大多数情况下，您可以在 Chrome 中指定单元格宽度。为 colspan 单元分配宽度很复杂，引擎都在那里做奇怪的事情。也就是说，我同意这应该被视为 Chrome 错误。分配 colspan 宽度的算法目前正在重新设计，但可能要等到 Chrome 90 之后才会发布。而且我不知道这种情况的行为是否会改变。

标签： css google-chrome html-table

【解决方案1】：

table-layout:fixed 为封闭表提供了开放表的比例。
Here 是变化。

【讨论】：