纯HTML中th/td的colspan不生效，无法实现列宽比例设置

核心误解：colspan的真实作用 #

colspan属性的唯一功能是指定单元格跨越的基础列数量，和Microsoft Excel的「合并单元格」完全等价——它既不是相对宽度单位，也没有控制列宽比例的能力。你的问题根源在于错误地把colspan当成了宽度比例的控制工具。

你的场景中宽度未按预期变化的原因 #

在你的代码里：

• 表格的总基础列数为 1 + 3*7 = 22（第一列占1个基础列，后续7列各占3个）
• 但由于所有行的单元格都刚好填满这些基础列，且你没有指定任何基础列的宽度，浏览器会采用默认的自动布局逻辑：将表格的可用宽度平均分配给每个视觉上的单元格（也就是你写的8个<th>和8个<td>），而非按照colspan的数值分配比例。这就是为什么所有单元格宽度一致，和colspan声明无关。

正确的列宽控制方式 #

你已经用CSS类配合固定百分比宽度解决了问题，这是最直接有效的方案。如果一定要结合colspan实现比例，需要强制表格使用固定布局并定义基础列宽度：

table {
  table-layout: fixed;
  width: 100%;
}
/* 定义基础列宽度为1份，colspan=3的单元格会自动占3份宽度 */
col {
  width: 1%;
}

然后给表格添加<colgroup>来对应基础列：

<table border="2">
  <colgroup>
    <col><!-- 对应第一列的1个基础列 -->
    <col><col><col><!-- 对应第二列的3个基础列 -->
    <col><col><col><!-- 第三列 -->
    <col><col><col><!-- 第四列 -->
    <col><col><col><!-- 第五列 -->
    <col><col><col><!-- 第六列 -->
    <col><col><col><!-- 第七列 -->
    <col><col><col><!-- 第八列 -->
  </colgroup>
  <!-- 原thead和tbody代码不变 -->
</table>

但这种方式远不如直接用CSS类控制单元格宽度直观。

你的原始代码 #

<table border="2">
  <thead>
    <tr>
      <th colspan="1">th1 colspan1</th><!-- colspan=1 here -->
      <th colspan="3">th2 colspan3</th>
      <th colspan="3">th3 colspan3</th>
      <th colspan="3">th4 colspan3</th>
      <th colspan="3">th5 colspan3</th>
      <th colspan="3">th6 colspan3</th>
      <th colspan="3">th7 colspan3</th>
      <th colspan="3">th8 colspan3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="1">td1 colspan1</td><!-- colspan=1 here -->
      <td colspan="3">td2 colspan3</td>
      <td colspan="3">td3 colspan3</td>
      <td colspan="3">td4 colspan3</td>
      <td colspan="3">td5 colspan3</td>
      <td colspan="3">td6 colspan3</td>
      <td colspan="3">td7 colspan3</td>
      <td colspan="3">td8 colspan3</td>
    </tr>
  </tbody>
</table>

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