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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With