HTML表格value值未全部在最后一列显示的问题求助

问题原因 #

HTML表格在同时存在跨行、跨列属性时，如果没有显式定义列的基准规则，浏览器自动计算列布局时会出现逻辑错乱，无法正确识别跨行单元格占用的中间列位置，导致第二、第三行的value单元格没有对齐到最右侧。
你的表格总列数为15列，第一行定义的两个rowspan="3"的单元格会占用后续两行的4个对应列位置，但由于缺少列基准锚定，浏览器会将后续行的value单元格提前渲染，出现错位。

解决方案 #

方案1：添加隐式基准行锚定列（兼容性最好） #

在表格最开头加一行全为单格的隐藏行，明确声明总共有15列，让浏览器可以正确识别每一列的位置，visibility: collapse属性可以让这行不占用页面空间，同时还能生效列定义逻辑，代码如下：

<table>
  <!-- 新增隐藏基准行 -->
  <tr style="visibility: collapse;">
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
    <td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td colspan="2">4</td>
    <td colspan="7">key</td>
    <td colspan="2" rowspan="3"><!-- empty and crossed out--></td>
    <td colspan="2" rowspan="3"><!-- empty and crossed out--></td>
    <td colspan="2">value</td>
  </tr>
  <tr>
    <td colspan="2">5</td>
    <td colspan="4">key </td>
    <td colspan="3">calc</td>
    <td colspan="2">value</td>
  </tr>
  <tr>
    <td colspan="2">6</td>
    <td colspan="7">key</td>
    <td colspan="2">value</td>
  </tr>
</table>

方案2：使用colgroup显式定义列 #

你也可以通过colgroup提前声明所有列，同样可以解决布局问题：

<table>
  <!-- 定义15个列的基准 -->
  <colgroup>
    <col><col><col><col><col>
    <col><col><col><col><col>
    <col><col><col><col><col>
  </colgroup>
  <!-- 原有表格代码保持不变 -->
  <tr>
    <td colspan="2">4</td>
    <td colspan="7">key</td>
    <td colspan="2" rowspan="3"><!-- empty and crossed out--></td>
    <td colspan="2" rowspan="3"><!-- empty and crossed out--></td>
    <td colspan="2">value</td>
  </tr>
  <tr>
    <td colspan="2">5</td>
    <td colspan="4">key </td>
    <td colspan="3">calc</td>
    <td colspan="2">value</td>
  </tr>
  <tr>
    <td colspan="2">6</td>
    <td colspan="7">key</td>
    <td colspan="2">value</td>
  </tr>
</table>

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