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

Posted 2023-03-05

【中文标题】HTML表格在隐藏单元格时留下空白

【英文标题】：HTML table leaving open gaps when hiding cells

【发布时间】：2019-01-30 02:02:19

【问题描述】：

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

当第一个表中标有“.to-hide”类的单元格通过将该类更改为“.hide”来隐藏时（如第二个表所示），结果第二个表的布局出现不一致；第一部分中的单元格“4”关闭了隐藏单元格留下的所有间隙，但第二部分中的单元格“4”留下了开放的间隙。

在 Chrome 68.0.3440.106 上，下面的代码 sn-p 显示了一个单元格“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>

【问题讨论】：

在 Safari 11.1.2 上运行，当我运行您的代码 sn-p 时，两个表都表现出相同的行为。 Firefox 61.0.2 呈现单元格 4 与 Safari 不同，但在两个表之间仍然是一致的。澄清一下，您提供的图像有两个表格 - 前者与 Safari 匹配，后者与 Firefox 匹配。

我在 Chrome 68.0.3440.106 上运行它。我添加了一个指向图片的链接，显示了我所看到的内容。

确认 Chrome 的行为与您声明的一样，并且 Chrome 的行为与 Safari 和 Firefox 不同。由于您的代码在三种不同的浏览器中表现不同，我建议寻找不同的方法。

'A' 单元格上的 col-span 为 '3'，如果你将其降低到 '2' 并将 'i' 上的 colspan 从 '4' 更改为 '3' '，它似乎纠正了您所看到的问题。我不确定为什么它会以这种方式影响它，但似乎问题可能是由于这些 col-spans 造成的。

如建议的那样，一种解决方法是在隐藏单元格时通过更改行跨度和列跨度来更改表的底层结构。这需要一些javascript。我最终实现的更简单的解决方案是简单地包装表格单元格的内容并隐藏它们：而不是

blah，我这样做了 废话。这样可以保持 的结构完整，并且只要将其样式设置为折叠所有

上的边框和边距，结果就符合要求。希望这对将来的某人有所帮助。

【参考方案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>