html - 表格之间的边距折叠

Question

我在一个页面上有几个表格，并且希望表格之间有一些空间。有些表格可能只有空单元格；此类表格的高度为零，在这种情况下我不想添加任何额外的间距。

通常情况下，margin collapsing 就可以解决问题。但是，我收集的数据表明，表格建立了一个 block 格式化上下文 (BCF)，并且在建立 BCF 的框之间不会发生边距折叠。

您可以看到运行下面的代码片段:您得到一个 1em “1”和“2”之间的空格，而是一个2em “2”和“3”之间的空格，而我总是想要一个 1em空间。但是如何实现呢？

PS:我必须处理一些限制:我不能删除空表的标记或在它们上添加类。但是，我可以为每个表添加一个容器，例如 <div> . (我希望这样做并在那个容器上移动 margin-bottom 可以解决问题，但事实并非如此，也许是因为如果一个 block 建立了 BFC，那么它的父 block 也会这样做。)最后，我当然可以写在非空表上添加带有边距的类的 JavaScript，但不认为这是可接受的解决方案。

table { margin-bottom: 1em }

<table><tr><td>1</td></tr></table>
<table><tr><td>2</td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td>3</td></tr></table>

Answer 1

有趣的问题。不是一件容易的事。这样的事情怎么样:https://codepen.io/MSCAU/pen/jQLWxL ？垫片是灰色的，以显示正在发生的事情:

table {  
  border-spacing: 0;
}

td {
  border: 1px solid grey;
}

td:empty {
  display: none;
}

td:not(:empty) {
  &:after {
    content: '';
    display: block;
    height: 30px;
    width: 10px;
    background-color: rgba(99,66,33,0.3);
  }
}

在您的示例中，您的每个表格中只有一个单元格，所以这是可行的。