如何在多行表格中使用colspan实现多半列布局？

首先明确：HTML的colspan属性只能接受正整数值，没法直接设置"0.5"这种半列值，但可以通过拆分基础列的方式模拟半列布局。

核心思路 #

把表格的基础列数设为偶数（比如6列，对应3个"视觉整列"），让：

• 1个"视觉半列" = 1个基础列
• 1个"视觉整列" = 2个基础列
• 1.5个"视觉列" = 3个基础列
  以此类推，所有需要的半列/整列组合都能转换成基础列的整数倍，用colspan实现。

针对你需求的示例代码 #

以下是模拟目标布局的完整代码：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse; /* 合并边框，让布局更贴合 */
}
th, td {
  padding: 8px;
  text-align: center;
}

<table>
  <!-- 第一行：对应 0.5 + 1 + 1 + 0.5 视觉列 → 拆分为1+2+2+1基础列 -->
  <tr>
    <th colspan="1"></th>
    <th colspan="2">Test</th>
    <th colspan="2">Test</th>
    <th colspan="1"></th>
  </tr>
  <!-- 第二行：对应 0.5 + 2.5 视觉列 → 拆分为1+5基础列 -->
  <tr>
    <td colspan="1"></td>
    <th colspan="5">Test</th>
  </tr>
  <!-- 第三行：对应 0.5 + 1.5 + 1 视觉列 → 拆分为1+3+2基础列 -->
  <tr>
    <td colspan="1"></td>
    <th colspan="3">Test</th>
    <th colspan="2">Test</th>
  </tr>
</table>

扩展支持更多半列 #

完全可以支持更多数量的半列组合：

• 只需将表格的基础总列数设为足够大的偶数（比如如果需要最多支持4个整列，就设8个基础列）
• 所有视觉上的半列、整列、1.5列、2.5列等，都转换成基础列的整数倍即可（比如2.5视觉列=5基础列）

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