Mozilla Firefox中visibility: collapse属性bug的可行解决方案有哪些？

visibility: collapse应用在表格列时，火狐存在历史遗留bug：效果等同于visibility: hidden，表格不会收缩宽度，可见列左移后右侧会出现空白区域，表格越大异常越明显。以下是可落地的跨浏览器兼容方案：

方案1：直接用单元格显隐控制（优先推荐） #

完全放弃visibility: collapse的实现逻辑，通过控制目标列所有单元格和对应col元素的样式实现显隐，三浏览器表现完全一致：

• 隐藏列时，给对应col元素添加样式：width: 0 !important; border: none; padding: 0; margin: 0
• 同时给该列下所有th、td元素添加样式：display: none !important
• 显示列时移除上述样式即可，表格会自动计算宽度重排，无留白问题

示例代码 #

/* 公共隐藏类 */
.col-hidden {
  width: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}
.cell-hidden {
  display: none !important;
}

切换列显隐时，只需给对应列的col元素添加/移除col-hidden类，给该列所有th、td添加/移除cell-hidden类即可。

方案2：针对火狐做专属兼容（适合存量代码改造） #

如果现有逻辑已经基于visibility: collapse实现，全量改造成本高，可以只针对火狐做特殊处理：

• 使用CSS的火狐专属匹配规则@-moz-document url-prefix()，火狐环境下隐藏列时走方案1的单元格显隐逻辑
• Chrome、Edge等其他浏览器保留原有visibility: collapse逻辑不变，无需改动现有代码

方案3：固定宽度表格的简易适配 #

如果你的表格是固定列宽、固定总宽的场景，不想修改单元格属性，可以用该方案：

• 隐藏列时，手动计算表格的实际显示宽度 = 原总宽度 - 所有隐藏列的宽度
• 给table元素设置计算后的宽度，同时添加overflow: hidden属性，裁剪掉右侧多余的空白区域
• 该方案局限性较强，只适合列宽完全固定的场景，不建议用于动态宽度表格

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