为何表格无法按colgroup中的百分比设置调整列宽？

阿华AIGC实验室

2026-5-29

问题分析与解决方案

核心原因很明确：当你把<thead tr>和<tbody>设置为display:block时，它们脱离了表格的原生布局上下文，colgroup的宽度规则是依赖表格原生的table-row-group、table-row等display属性生效的，所以此时colgroup的设置完全失效。

你的需求是「第一列50%宽度，后两列各25% + tbody区域独立滚动」，下面给你两种可靠的解决方案：

方案一：使用`position:sticky`实现固定表头（推荐）

这种方案保留表格原生布局，colgroup可以正常工作，代码简洁且不会出现列错位问题：

修改后的CSS代码

.table-container {
  position: absolute;
  height: 94%;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  top: 15px;
  overflow-y: auto; /* 让容器负责滚动 */
  box-sizing: border-box; /* 避免padding撑宽容器 */
}
.style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #F4F7F7;
}
.fixed_header {
  width: 100%;
  table-layout: fixed; /* 固定布局确保colgroup宽度生效 */
  border-collapse: collapse;
}
.fixed_header thead th {
  position: sticky;
  top: 0;
  background-color: #fff; /* 加背景色防止被tbody内容覆盖 */
  border-bottom: 1px solid black;
}
.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
}

HTML保持不变

你的原始HTML中的colgroup设置会完美生效，无需改动：

<div class="table-container">
  <table class="fixed_header">
    <colgroup style="width: 100%;">
      <col span="1" style="width: 50%;">
      <col span="1" style="width: 25%;">
      <col span="1" style="width: 25%;">
    </colgroup>
    <thead>
      <tr>
        <th>Factor</th>
        <th>y_i</th>
        <th>F_i</th>
      </tr>
    </thead>
    <tbody class="style-2">
      <!-- 你的表格行内容 -->
    </tbody>
  </table>
</div>

方案二：保留`display:block`的兼容方案

如果需要兼容不支持position:sticky的旧浏览器，可以手动给表头和表格单元格设置对应宽度，确保列对齐：

修改后的CSS代码

.table-container {
  position: absolute;
  display: block;
  height: 94%;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  top: 15px;
  box-sizing: border-box;
}
.style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}
.style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #F4F7F7;
}
.fixed_header{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_header tbody{
  display:block;
  width: 100%;
  overflow-y: auto;
  height: 90%;
}
.fixed_header thead tr {
  display: block;
  width: 100%;
  border-bottom: 1px solid black;
}
.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  box-sizing: border-box; /* 避免padding影响宽度计算 */
}
/* 手动设置对应列宽 */
.fixed_header th:nth-child(1), .fixed_header td:nth-child(1) { width: 50%; }
.fixed_header th:nth-child(2), .fixed_header td:nth-child(2) { width: 25%; }
.fixed_header th:nth-child(3), .fixed_header td:nth-child(3) { width: 25%; }