为什么当我尝试打印网页时,广告内容不会在每个打印页面中重复出现?

时间:2018-07-19 07:58:03

标签: javascript jquery html css printing

我有一张桌子,我正在尝试打印它。在正常模式下,它可以正常工作,但是当我旋转th时,它会在第一个打印页面中可见,而在其他页面上不可见。

th span {
  transform-origin: 0 50%;
  transform: rotate(-90deg);
  white-space: nowrap;
  display: block;
  position: relative;
  top: 0;
  left: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<table class="table table-bordered">
  <thead>
    <tr>
      <th><span style="transform-origin: 0 50%;
        transform: rotate(-90deg);
        white-space: nowrap;
        display: block;
        position: relative;
        top: 0;
        left: 50%;">Firstname</span></th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>

    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
    </tr>
  </tbody>
</table>

第一页和第二页的屏幕截图:

第一页打印:

enter image description here

第二个打印页面:

enter image description here

注意:当我从span移除旋转th

时,此方法有效

缺少什么?

4 个答案:

答案 0 :(得分:8)

某些浏览器按照预期在每个页面上重复thead元素。但是某些浏览器不会,您需要为表头添加额外的CSS作为

thead {display: table-header-group;}

注意:无论您尝试哪种操作,Opera 7.5和IE 5都不会重复标题。

答案 1 :(得分:2)

我得到了答案,现在它已经固定并且可以正常工作,因为现在我在打印脚本代码中使用CSS而不是普通的CSS。

答案 2 :(得分:2)

对于打印,您可以使用单独的CSS。

将代码添加到打印介质中,如下所示。

@media print {

    // Your code here

}

希望它会起作用。

答案 3 :(得分:-1)

您可能需要给th填充一些内容

th {
    padding: 3em;
}

What my print looks like after I add padding to th