隐藏表格的HTML表留有空白

Question

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

当通过将此类更改为“ .hide”（在第二个表中显示）而隐藏了第一个表中标有“ .to-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

通过隐藏单元格“ 1”的单元格“ a”和“ b” 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>