Safari 和 Chrome 之间的 CSS 'visibility:collapse' 错误？

Question

编写一个简单的html 表时，我在浏览器之间遇到了一个令人惊讶的渲染错误。
因为它太基础了，也许我做错了什么......

当您加载这个MDN page 时，您可以看到一个非常简单的表格（带有html 和css）。

我的目标是隐藏第一列。
乍一看好像很简单，加style="visibility:collapse"。
下面所有html代码：

<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col style="visibility:collapse">
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <tr>
        <td> </td>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

它在Chrome 中完美运行，但在Safari 中却不行。其他浏览器不知道。
这是为什么？有破解吗？
谢谢。

Answer 1

实际上这不是一个错误。问题出在表结构上。您有 5 列，但 <col span="2"> 不起作用。该属性不是span，而是colspan。如果您正确编写所有 5 列，则示例有效。请参阅此处，Cell 1 的第一列已隐藏。

<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col style="visibility:collapse">
        <col class="batman">
        <col class="flash">
        <col>
        <col>
    </colgroup>
    <tr>
        <th>Cell 1</th>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>