仅当打印表时才在表前留出空格

Question

我正在为K-6年级创建一个成绩单，它根据学生的成绩打印特定的表格。例如，五年级的学生不会在成绩单上显示“阅读阶段”，但一年级的学生会。我已经对样式进行了正确的格式化，以便有条件地打印表格，但是表格之间的间距让我苦苦挣扎。

我希望在表之间有一个标准的空间量，所以我尝试了添加一个空行作为表的第一行，或者添加space -top=50pt。我尝试过的所有操作都会导致为所有表添加空间，即使是隐藏的表，因此有时表之间会有200个死区。不太好。

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

Answer 1

我不确定你是如何隐藏你的tables的。如果你通过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>

​

Answer 2

我知道上面已经回答了，但是你知道@media print css吗？您可以添加一些仅在打印时应用的条件打印css。

​

// only for testing, you can print normally without this. It is just for stackoverflow testing...
$("#testPrint").on("click", function() {
  window.print();
});

@media print {
  /* styles go here */
  .myTables {
    background: orange !important;
    margin: 100px !important;
    border: 1px solid black !important;
    width: 500px;
  }
}

.myTables {
  background: pink;
  border-collapse: collapse;
  border: 1px dashed black;
  padding: 5px;
  margin: 5px;
  text-align: center;
}

<!-- you dont need this javascript either -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<div id="wrapper">
  <table class='myTables'>
    <tr>
      <td>test1</td>
      <td>test2</td>
    </tr>
  </table>

  <table class='myTables'>
    <tr>
      <td>test1</td>
      <td>test2</td>
    </tr>
  </table>

  <table class='myTables'>
    <tr>
      <td>test1</td>
      <td>test2</td>
    </tr>
  </table>
</div>

<button id="testPrint">TEST PRINT</button>

​