thead含两行表头时，第二行列宽设置失效的解决方法

这个问题我之前也碰到过！核心原因是表格默认的自动布局模式会优先根据第一行表头的内容/宽度来计算整列的宽度，后面行的宽度设置会被直接忽略，再加上你th里嵌套了div做边框，更容易干扰宽度计算。给你几个靠谱的解决办法：

1. 开启表格固定布局（关键） #

给表格设置table-layout: fixed，这个属性会让表格放弃自动根据内容调整列宽的逻辑，转而按照我们指定的规则来固定列宽。

2. 用<colgroup>+<col>统一控制列宽 #

这是最可靠的方式，直接给每一列指定宽度，不受表头行数的影响，代码结构也更清晰：

HTML 示例 #

<table>
  <!-- 用colgroup指定每列宽度 -->
  <colgroup>
    <col style="width: 180px;">
    <col style="width: 220px;">
    <col style="width: 120px;">
    <col style="width: auto;"> <!-- 剩下的列自动分配宽度 -->
  </colgroup>
  <thead>
    <tr>
      <!-- 第一行表头，th内嵌套div做边框 -->
      <th><div>主表头1</div></th>
      <th><div>主表头2</div></th>
      <th><div>主表头3</div></th>
      <th><div>主表头4</div></th>
    </tr>
    <tr>
      <!-- 第二行表头，不需要再单独设置宽度 -->
      <th><div>子表头1</div></th>
      <th><div>子表头2</div></th>
      <th><div>子表头3</div></th>
      <th><div>子表头4</div></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容单元格1</td>
      <td>内容单元格2</td>
      <td>内容单元格3</td>
      <td>内容单元格4</td>
    </tr>
  </tbody>
</table>

CSS 示例 #

table {
  width: 100%;
  table-layout: fixed; /* 必须开启固定布局 */
  border-collapse: collapse;
}

/* 处理th内的div，确保边框不会撑开宽度 */
th div {
  border: 1px solid #ddd;
  padding: 6px 10px;
  width: 100%; /* 让div继承th的宽度 */
  box-sizing: border-box; /* 边框和内边距包含在宽度内，避免溢出 */
}

td {
  border: 1px solid #ddd;
  padding: 6px 10px;
}

3. 备选方案：给第一行表头设置宽度 #

如果不想用colgroup，也可以直接在第一行的th里设置宽度，配合table-layout: fixed，第二行的th会自动继承这个宽度：

/* 第一行表头的th设置宽度 */
thead tr:first-child th:nth-child(1) { width: 180px; }
thead tr:first-child th:nth-child(2) { width: 220px; }
/* 以此类推... */

为什么这样能解决问题？ #

• table-layout: fixed 强制表格使用固定列宽逻辑，不再根据内容动态调整；
• <colgroup> 直接绑定列的宽度，优先级高于行内的宽度设置，不管表头有多少行，都会遵循这个规则；
• box-sizing: border-box 确保th内的div边框和内边距不会超出th的宽度，避免干扰列宽计算。

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