HTML表格固定列宽失效：如何将首列设为160px？

问题原因 #

你设置了table-layout:fixed但首列宽度不生效，核心原因是：table-layout:fixed模式下，浏览器仅根据表格第一行的单元格计算列宽，你把宽度设置在了thead第二行的<td>上，而第一行的<th>用了colspan，浏览器会先基于这些合并单元格平分整个表格宽度，第二行的宽度设置自然被忽略。

解决方案 #

最可靠的方式是用<colgroup>直接定义每一列的宽度，精准控制首列尺寸：

修改后的代码 #

<table style="width:100%;table-layout:fixed">
  <colgroup>
    <col style="width:160px"> <!-- 指定首列宽度 -->
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th colspan="6">Name</th>
      <th colspan="4">Last Name</th>
      <th colspan="1">Age</th>
    </tr>
    <tr>
      <td style="color:red">first header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
      <td>header</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
      <td><div><input value='cell'/></div></td>
    </tr>
  </tbody>
</table>

原理说明 #

<colgroup>里的每个<col>标签对应表格的一列，给第一个<col>设置width:160px后，结合table-layout:fixed，浏览器会严格按照这个宽度渲染首列，剩余的表格宽度会自动平分给其他列，完全符合你的需求。

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