Question

我正在创建K-6年级的成绩单，该成绩单会根据学生的成绩打印某些表格。例如，五年级的学生在报告卡上不会显示“阅读阶段”，但是一年级的学生会在报告卡上显示“阅读阶段”。我已经设置了正确格式化的样式以有条件地打印表格，但这是我努力使用的表格之间的间距。

我希望表之间有标准的空间，因此我尝试了诸如在表的第一行添加空白行或添加margin-top = 50pt之类的事情。我尝试过的所有操作都会为所有表（甚至是隐藏表）增加空间，因此有时表之间有200点的死空间。不好。

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

Answer 1

我不确定您如何隐藏table。如果通过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>

仅当表格已打印时，表格之前的空间

2 个答案: