HTML表格使用colspan、rowspan未达预期渲染效果如何解决

问题原因 #

你写的HTML表格渲染变形，核心原因是浏览器默认的自动列宽计算逻辑和你预设的网格结构冲突：

• 你的表格基础是4行4列的布局，没有手动指定列宽时，浏览器会根据每列的内容自动计算宽度
• 前3行的第三列只有「4、1」两个短内容单元格，浏览器会默认把第三列宽度压到最小，到了第四行8跨第二、三列的时候，也只会按照最小的列宽合并渲染，就出现了和设计稿不符的错位效果。

修正方案 #

给表格添加table-layout: fixed样式固定列宽计算规则，同时用<colgroup>标签提前定义每列的宽度比例，让浏览器按照预设的网格结构渲染即可，修正后的代码如下：

<table border="1" cellspacing="0" style="width: 400px;table-layout: fixed;">
  <!-- 提前定义4列宽度均等分配 -->
  <colgroup>
    <col width="25%">
    <col width="25%">
    <col width="25%">
    <col width="25%">
  </colgroup>
   <tr>
      <th colspan="3">7</th>
      <th rowspan="3">6</th>
   </tr>
   <tr>
      <td colspan="2" rowspan="2">2</td>
      <td>4</td>
   </tr>
   <tr>
      <td>1</td>
   </tr>
   <tr>
      <td>5</td>
      <td colspan="2">8</td>
      <td>3</td>
   </tr>         
</table>

你可以根据实际需求调整table的总宽度，4列的宽度比例也可以按需修改，只要提前明确列宽规则就不会出现变形问题。

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