如何将HTML表格中空td下方的单元格数据上移填充空单元格？

能否用CSS实现？ #

不行。表格的单元格是基于行列的结构化布局，CSS只能控制样式（比如隐藏空单元格），但没办法改变DOM的结构逻辑——空<td>依然会占据列位置，没法让下方单元格的内容“上移填充”到这个空单元格里。如果用CSS隐藏空单元格，只会让这个位置变成空白，不会让下面的内容补上来。

HTML修改方案（无需第三方工具） #

有两种规范的修改方式，都能实现你要的效果：

方法1：使用rowspan合并单元格（推荐，符合表格语义）

把第二行的第三列内容移到第一行的空单元格里，同时给这个单元格加上rowspan="2"属性，让它跨两行显示，然后删掉第二行对应的<td>。修改后的代码如下：

<table border="1">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td rowspan="2">Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 4</td>
  </tr>    
</table>

这样“Column 3”会占据第一行和第二行的第三列位置，刚好填充原来的空白区域。

方法2：直接调整单元格内容位置

如果不需要跨两行显示，只是想让“Column 3”显示在第一行的空位置，那直接把第一行的空<td>替换成<td>Column 3</td>，然后删掉第二行的<td>Column 3</td>即可：

<table border="1">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 4</td>
  </tr>    
</table>

这种方式适合内容只需要在第一行显示的场景。

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