我有一张桌子,我正在尝试打印它。在正常模式下,它可以正常工作,但是当我旋转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>
第一页和第二页的屏幕截图:
第一页打印:
第二个打印页面:
注意:当我从span
移除旋转th
缺少什么?
答案 0 :(得分:8)
某些浏览器按照预期在每个页面上重复thead元素。但是某些浏览器不会,您需要为表头添加额外的CSS作为
thead {display: table-header-group;}
注意:无论您尝试哪种操作,Opera 7.5和IE 5都不会重复标题。
答案 1 :(得分:2)
我得到了答案,现在它已经固定并且可以正常工作,因为现在我在打印脚本代码中使用CSS
而不是普通的CSS。
答案 2 :(得分:2)
对于打印,您可以使用单独的CSS。
将代码添加到打印介质中,如下所示。
@media print {
// Your code here
}
希望它会起作用。
答案 3 :(得分:-1)