Why thead content is not repeating in each and every print page while I try to print the web page?

Question

I have a table and I'm trying to print it. It's working fine in the normal mode but when I rotate my th then it is visible in the first print page but not visible on other pages.

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>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>

    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Screenshot of first and second print page:

First print page:

Second print page:

Note: This is working when I remove rotate span from th

What is missing?

Answer 1

For Print you may use separate CSS.

Add the code inside the print media like below.

@media print {

    // Your code here

}

Hope it will work.

Answer 2

Some browsers repeat the thead element on each page, as they are supposed to. But some browsers will not, you need to add extra css for your table header as

thead {display: table-header-group;}

Note: Opera 7.5 and IE 5 won't repeat headers no matter what you try.