为什么当我尝试打印网页时，每个打印页面中的广告内容都没有重复？答案

【问题标题】：Why thead content is not repeating in each and every print page while I try to print the web page?为什么当我尝试打印网页时，每个打印页面中的广告内容都没有重复？
【发布时间】：2018-12-27 06:37:33
【问题描述】：

我有一张桌子，我正在尝试打印它。它在正常模式下工作正常，但是当我旋转我的 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>

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

第一个打印页：

第二张打印页：

注意：当我从 th 中删除旋转 span 时，此功能有效

缺少什么？

【问题讨论】：

我很好奇，你为什么要旋转th？
@R.D 这是客户要求，实际上在thead 超过 15 th 那么我们只有一种选择以 A4 纸尺寸打印。
好的，等等。让我看看。
好吧，我解决了，只有一件事。 First name 的一部分也打印在第一页上。由于它实际上是整个 th 名称的延续，因此除非您更改 th 名称，否则无法将其删除。您可以接受该解决方案吗？然后我会发布它@Rohit
但这很奇怪。当我使用您的代码时，我看不到您看到的错误。你用的是什么浏览器？

标签： javascript jquery html css printing

【解决方案1】：

您可能需要给您的th 一些填充

th {
    padding: 3em;
}

What my print looks like after I add padding to th

【讨论】：

【解决方案2】：

我得到了我的答案，它现在已修复并且工作正常，因为现在我在打印脚本代码中使用 CSS 而不是普通的 CSS。

【讨论】：

拜托，你能澄清你的答案吗？
@Salketer 实际上我在 CSS 中直接使用样式，但现在我在打印脚本中使用 css 来编写打印代码。所以现在工作正常

【解决方案3】：

一些浏览器在每个页面上重复 thead 元素，这是他们应该做的。但是有些浏览器不会，你需要为你的表头添加额外的css作为

thead {display: table-header-group;}

注意：无论您尝试什么，Opera 7.5 和 IE 5 都不会重复标题。

【讨论】：

【解决方案4】：

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

在打印介质中添加代码，如下所示。

@media print {

    // Your code here

}

希望它会奏效。

【讨论】：