html - 仅当打印表格时表格前的空格

Question

我正在为 K-6 年级制作一份成绩单，它根据学生的成绩打印某些表格。例如，五年级学生的成绩单上不会显示“阅读阶段”，但一年级学生会。我已经正确格式化了样式以有条件地打印表格，但这是我正在努力处理的表格之间的间距。

我希望表格之间有一个标准的空间量，所以我尝试了一些方法，比如添加一个空白行作为表格的第一行，或者添加 margin-top=50pt。我尝试过的所有方法都会为所有表添加空间，甚至是隐藏的表，因此表之间有时会有 200 点死空间。不好。

我需要一种(创造性的)方法来有条件地添加空间，仅当要打印表格时。

Answer 1

我不确定您是如何隐藏您的表的。如果您通过 HTML5 hidden 属性或 display: none 隐藏它们，则上边距不会干扰您的布局。

如果出于某种原因您无法通过其中一种方式隐藏您的内容，CSS negation可能会有帮助。在这个例子中，我是说所有不属于某个 class 的表都应该有 margin-top: 1em。

table:not(.skip) {
  margin-top: 1em;
}

.skip {
  position: relative;
  background-color: yellow;
}

.skip::after {
  position: absolute;
  top: 3px;
  left: 150%;
  content: ' <-- no margin-top';
  white-space: nowrap;
}

<table>
  <tr>
    <td>table</td>
  </tr>
</table>

<table class="skip">
  <tr>
    <td>table</td>
  </tr>
</table>

<table>
  <tr>
    <td>table</td>
  </tr>
</table>

<table class="skip">
  <tr>
    <td>table</td>
  </tr>
</table>

<table>
  <tr>
    <td>table</td>
  </tr>
</table>