javascript - 为什么在我尝试打印网页时，广告内容没有在每个打印页面中重复出现？

Question

我有一张 table ，我正在尝试打印它。它在正常模式下工作正常，但当我旋转我的 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 中删除 rotate span 时，这会起作用

缺少什么？

Answer 1

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

thead {display: table-header-group;}

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