Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

Second print page:

enter image description here

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

What is missing?

like image 615
Rohit Verma Avatar asked Jul 19 '18 07:07

Rohit Verma


2 Answers

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.

like image 26
Saif Avatar answered Sep 21 '22 05:09

Saif


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.

like image 152
RAUSHAN KUMAR Avatar answered Sep 17 '22 05:09

RAUSHAN KUMAR