Safari 和 Chrome 之间的 CSS“可见性：折叠”错误？

Question

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

当你加载这个MDN 页面时，你可以看到一个非常简单的表格（带有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

其实这不是bug。 问题在于表结构。 您有 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>