固定表头表尾的表格中，如何设置COL7下属子列的自定义宽度？

我明白你遇到的麻烦了——当表格的thead/tfoot固定、还用到了colspan/rowspan时，子列的宽度设置总是不生效，确实挺头疼的。咱们来一步步拆解问题，找到解决方案：

问题根源 #

你当前的CSS把tbody设为display:block，同时tbody tr设为display:table，这打破了原生表格的列宽联动机制。原生表格的列宽是由thead统一控制的，但这种自定义的块级布局让tbody的行独立计算宽度，导致直接给子列加style="width"无法生效。

方案1：适配你当前的布局（修改CSS） #

如果不想大改现有结构，只需给tbody的行也加上table-layout:fixed，同时给目标子列设置类名来指定宽度：

第一步：给HTML中的目标子列添加类名

<tbody>
  <tr>
    <!-- 其他列 -->
    <td class="col7-1">COL7-1内容</td>
    <td class="col7-2">COL7-2内容</td>
    <td class="col7-3">COL7-3内容</td>
    <!-- 其他列 -->
  </tr>
</tbody>

第二步：修改CSS代码

/* 确保整个表格的基础一致性 */
table {
  width: 100%;
  border-collapse: collapse;
}

thead, tfoot {
  display: table;
  width: 100%;
  table-layout: fixed; /* 表头用固定布局控制宽度 */
}

tbody {
  display: block;
  height: 200px;
  overflow-y: scroll;
  width: 100%;
  /* 可选：抵消滚动条宽度避免表头tbody错位 */
  padding-right: 17px;
  width: calc(100% + 17px);
}

/* 关键：让tbody的行也使用固定布局，遵循子列宽度设置 */
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 给COL7的三个子列设置自定义宽度 */
.col7-1 { width: 100px; }
.col7-2 { width: 150px; }
.col7-3 { width: 200px; }

/* 如果thead里有对应子表头，也要同步设置宽度保证对齐 */
thead .col7-1-th { width: 100px; }
thead .col7-2-th { width: 150px; }
thead .col7-3-th { width: 200px; }

方案2：更现代的替代方案（用Sticky定位固定表头） #

如果可以调整布局，推荐用position:sticky来固定thead和tfoot，这种方式保留原生表格的布局逻辑，列宽控制会更简单：

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 开启固定布局，让列宽设置生效 */
}

/* 固定表头 */
thead th {
  position: sticky;
  top: 0;
  background: #fff; /* 防止内容透过表头显示 */
}

/* 固定表脚 */
tfoot td {
  position: sticky;
  bottom: 0;
  background: #fff;
}

/* 设置tbody滚动 */
tbody {
  height: 200px;
  overflow-y: auto;
}

/* 直接给目标子列设置宽度 */
.col7-1, thead .col7-1-th { width: 100px; }
.col7-2, thead .col7-2-th { width: 150px; }
.col7-3, thead .col7-3-th { width: 200px; }

这种方案不需要修改表格元素的display属性，完全依赖原生表格的布局规则，错位和宽度失效的问题会少很多。

内容的提问来源于stack exchange，提问作者Sebastián