为何隐藏部分列时colgroup宽度百分比失效？如何解决？

嘿，这个问题我之前也碰到过！浏览器在处理隐藏列后的表格布局时，确实经常会忽略colgroup的宽度设置——原因是默认的table-layout: auto会让浏览器根据可见内容重新计算列宽，完全无视之前的百分比配置。下面给你几个靠谱的解决方案：

方法一：强制表格使用固定布局（推荐） #

给表格添加table-layout: fixed属性，这会让浏览器严格按照colgroup里的宽度定义来渲染列，不管列是否隐藏。

示例代码： #

table, th, td { 
  border: 1px solid black; 
}

.widget-comparables-table { 
  width: 100%; 
  table-layout: fixed; /* 关键属性，强制按colgroup宽度渲染 */
}

/* 隐藏第2-7列 */
.widget-comparables-table tr > *:nth-child(2),
.widget-comparables-table tr > *:nth-child(3),
.widget-comparables-table tr > *:nth-child(4),
.widget-comparables-table tr > *:nth-child(5),
.widget-comparables-table tr > *:nth-child(6),
.widget-comparables-table tr > *:nth-child(7) {
  display: none;
}

原理：table-layout: fixed模式下，浏览器不会等待表格内容加载完成再计算宽度，而是直接根据<col>或colgroup的设置分配宽度，即使部分列隐藏，剩余列的宽度也会严格遵循你设置的百分比。

方法二：用visibility替代display隐藏列（备选） #

如果不想用固定布局，可以把display: none换成visibility: hidden，同时把列的宽、内边距、边框都设为0——这样列虽然不可见，但仍会占据布局“位置”，浏览器就不会打乱原有的宽度配置。

示例代码： #

.widget-comparables-table tr > *:nth-child(2),
.widget-comparables-table tr > *:nth-child(3),
.widget-comparables-table tr > *:nth-child(4),
.widget-comparables-table tr > *:nth-child(5),
.widget-comparables-table tr > *:nth-child(6),
.widget-comparables-table tr > *:nth-child(7) {
  visibility: hidden;
  width: 0;
  padding: 0;
  border: 0;
}

这个方法的缺点是隐藏列仍会占据DOM空间，可能在表格结构上有点冗余，但能保留原有的table-layout: auto行为。

方法三：直接给可见列设置明确宽度 #

如果colgroup的配置不太好调整，也可以直接给可见列设置固定百分比宽度，比如假设你剩下的列是第1、8、9列，分别需要20%、50%、30%的宽度：

示例代码： #

.widget-comparables-table tr > *:nth-child(1) { width: 20%; }
.widget-comparables-table tr > *:nth-child(8) { width: 50%; }
.widget-comparables-table tr > *:nth-child(9) { width: 30%; }

这种方法需要手动计算可见列的宽度比例，适合列数较少的场景。

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