Chrome与Safari浏览器中CSS visibility:collapse属性的HTML表格渲染差异问题及解决方案咨询

嘿，这个问题我之前也碰到过！你遇到的其实是浏览器对表格<col>元素visibility:collapse属性的实现差异问题——Chrome（以及所有基于Chromium的浏览器）正确支持了这个属性对列的隐藏逻辑，但Safari的WebKit内核在处理<col>的visibility:collapse时存在兼容性bug，它没有把这个样式正确传递给列内的所有单元格，导致第一列依然显示出来。

兼容解决方案 #

这里给你几个靠谱的兼容方案，能在Chrome、Safari等主流浏览器里都生效：

方案1：直接用CSS选择器隐藏第一列的所有单元格

这个方案绕过了<col>的兼容性坑，直接选中每一行的第一个单元格进行隐藏，兼容性拉满：

/* 隐藏表格中每一行的第一个单元格（包括<th>和<td>） */
table tr > *:first-child {
  display: none;
}

如果你的页面里有多个表格，不想影响其他表格，可以给目标表格加个类，精准控制：

/* 仅针对class为superhero-table的表格生效 */
table.superhero-table tr > *:first-child {
  display: none;
}

效果和visibility:collapse完全一致——隐藏列的同时，其他列会自动填充它的空间，不会破坏表格布局。

方案2：保留<colgroup>结构，做Safari降级处理

如果你想保留<colgroup>的语义化结构，可以用CSS特性检测来针对Safari做降级：

/* 给支持的浏览器用visibility:collapse */
col.hidden-col {
  visibility: collapse;
}

/* 针对不支持col元素visibility:collapse的浏览器（比如Safari） */
@supports not (visibility: collapse for col) {
  table tr > *:first-child {
    display: none;
  }
}

然后修改你的HTML，给目标<col>加上对应的类：

<colgroup>
  <col class="hidden-col">
  <col span="2" class="batman">
  <col span="2" class="flash">
</colgroup>

方案3：JS辅助（不推荐，除非必要）

如果以上CSS方案都不满足你的需求，也可以用JS遍历所有行来隐藏第一个单元格，但这种方式不如CSS优雅，还会增加页面开销，仅建议在特殊场景下用：

document.querySelectorAll('table tr').forEach(row => {
  const firstCell = row.querySelector('td, th');
  if (firstCell) firstCell.style.display = 'none';
});

小补充：visibility:collapse vs display:none #

这里顺便说下两者在表格列上的区别：

• visibility:collapse是专门为表格元素设计的，隐藏列/行但不会破坏表格布局，其他列会自动补位。
• display:none则是通用的隐藏属性，对表格单元格使用时，同样能达到隐藏列并补位的效果，而且兼容性更好，这也是为什么方案1能解决问题的原因。

内容的提问来源于stack exchange，提问作者charnould