HTML 表格在隐藏单元格时留下空白

Question

下面的示例包含两个表，每个表包含两个部分。表格和部分在结构上是相同的。

当第一个表中标有类“.to-hide”的单元格通过将此类更改为“.hide”而被隐藏时(在第二个表中显示)，第二个表的布局看起来不一致；第一部分中的单元格“4”关闭了隐藏单元格留下的所有间隙，但第二部分中的单元格“4”留下了开放的间隙。

在 Chrome 68.0.3440.106 上，下面的代码片段显示了一个单元格“4”如何填充空缺，但另一个单元格“4”却没有。在 Firefox 60.0.2 上，两个单元格“4”都留下空隙。下图是在 Chrome 68 上拍摄的。

我如何确保表格中的可见单元格能够跨浏览器一致地覆盖隐藏单元格留下的任何空白？

/* Styles to mark and hide marked cells. */
.to-hide { background-color: lightgray; }
.hide { display: none; }

/* Styles to make the tables in the code snippet look pretty. */
.left { display: inline-block; }
.right { display: inline-block; margin-left: 20px; }
table { background-color: yellow; }
td { padding: 0 1em; background-color: white; border: solid 1px gray; }

<div class="left">
Original table:

<table>
  <tbody>
    <tr>
      <td rowspan="3">1</td>
      <td rowspan="2">.<br/>2<br/>.</td>
      <td class="to-hide">3</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="to-hide">a</td>
      <td class="to-hide">b</td>
    </tr>
    <tr>
      <td colspan="3">A</td>
    </tr>
    <tr>
      <td colspan="4">i</td>
    </tr>
    <tr>
      <td rowspan="3">1</td>
      <td rowspan="2">.<br/>2<br/>.</td>
      <td class="to-hide">3</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="to-hide">a</td>
      <td class="to-hide">b</td>
    <tr>
      <td colspan="3">A</td>
    </tr>
    <tr>
      <td colspan="4">i</td>
    </tr>
  </tbody>
</table>

</div>
<div class="right">
Shaded cells hidden (notice cells "4"):

<table>
  <tbody>
    <tr>
      <td rowspan="3">1</td>
      <td rowspan="2">.<br/>2<br/>.</td>
      <td class="hide">3</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="hide">a</td>
      <td class="hide">b</td>
    </tr>
    <tr>
      <td colspan="3">A</td>
    </tr>
    <tr>
      <td colspan="4">i</td>
    </tr>
    <tr>
      <td rowspan="3">1</td>
      <td rowspan="2">.<br/>2<br/>.</td>
      <td class="hide">3</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="hide">a</td>
      <td class="hide">b</td>
    <tr>
      <td colspan="3">A</td>
    </tr>
    <tr>
      <td colspan="4">i</td>
    </tr>
  </tbody>
</table>

</div>

Answer 1

通过隐藏单元格“a”和“b”，单元格“1”的 rowspan="3" 想要占据与单元格“i”相同的区域。单元格“i”不能跨越 3 行，因为只剩下 3 行，最后一行跨越单元格“i”的所有列。

将隐藏单元格的大小强制设置为 0 无济于事。

.hide {
  visibility: hidden;
  width: 0;
  height: 0;
  padding: 0;
}

通过 position: absolute 将隐藏的单元格从流中移除也无济于事。

表格的第一部分看起来仍然不错(没有间隙)一定是浏览器进行了某种错误更正。

只有从表格中删除隐藏的单元格并更改 rowspan 和 colspan 的值，我才能实现单元格的预期分布。

<tr>
  <td rowspan="2">1</td>
  <td>.<br/>2<br/>.</td>
  <td>4</td>
</tr>
<tr>
  <td colspan="2">A</td>
</tr>
<tr>
  <td colspan="3">i</td>
</tr>