html - 使用@media print 在第二页上剪切 CSS/HTML 打印表
问题描述
当第二页继续时,我在我的 TD 上苦苦挣扎,进入第二页时边框总是被切断 有没有人有想法使用 CSS @media print 来解决这种问题?我尝试使用 page-break-inside 但它没有解决我的问题请帮忙
CSS
@media print {
body {
display: table;
padding-bottom: 40px;
height: auto;
font-size: 5pt;
margin-top: 20px;
}
.table-print {
font-family: arial, sans-serif;
width: 100%;
margin-left: 30px;
font-size: 9pt;
}
table {
page-break-inside:auto
}
td {
page-break-inside:avoid;
page-break-after:auto
}}
Laravel 刀片:
<table class="table-print">
<tr>
<h1>Company.</h1>
<h1>Item Summary</h1>
@foreach($c_name as $cc)
<h1>{{{$cc->description}}}</h1>
<h1>{{{$cc->address}}}</h1>
@endforeach
</tr>
<tr>
<td class="label-bold">Item</td>
<td class="label-bold">Quantity</td>
<td class="label-bold">Unit</td>
<td class="label-bold">Date of Return</td>
<td class="label-bold">Plate#</td>
<td class="label-bold">Reference no.</td>
<td class="label-bold">Remarks</td>
</tr>
@foreach($customer_returns as $customer_return)
<tr>
<td class="label"> {{{$item_number_return++}}}</td>
<td class="label"> {{{number_format($customer_return->qty) }}}</td>
<td class="label"> pcs</td>
<td class="label"> {{{$cc->date_return}}}</td>
<td class="label"> {{{$cc->plate_number}}}</td>
<td class="label"> {{{$cc->reference_number}}}</td>
<td class="label"> {{{$cc->ret_desc}}}</td>
</tr>
@endforeach
</table>
解决方案
您可以使用<thead>
标签添加表头。然后标题将应用到每个新页面的顶部,从而实现实心的顶部边框。
此外,您的公司/项目摘要信息可能应该在表格之外定义,而不是随机卡在<tr>
标签内。
<div>
<!-- Company/item summary info should probably go out here -->
</div>
<table class="table-print">
<thead>
<!--
This is really where your header row should go, using "th" instead of "td"...
<tr>
<th class="label-bold">Item</th>
<th class="label-bold">Quantity</th>
<th class="label-bold">Unit</th>
<th class="label-bold">Date of Return</th>
<th class="label-bold">Plate#</td>
<th class="label-bold">Reference no.</th>
<th class="label-bold">Remarks</th>
</tr>
...but leaving it empty can still allow you a solid top border across pages.
-->
</thead>
<tbody>
<!-- Your existing data rows -->
</tbody>
</table>
只需确保在 CSS 中根据需要定义所有边框。您没有将它们包括在上面,所以我们不知道您做了什么。
推荐阅读
- python - 为什么我的张量板在使用 SummaryWriter.add_scalar 时会显示“未找到标量数据”?
- ios - react-native-audio-recorder-player:无法读取未定义的属性“startRecorder”
- php - 如果包含视频,如何均衡 card-img 大小
- vue.js - 在 Vue 应用程序中应该在哪里加载路由元数据?
- google-maps - MapController 和谷歌地图标记不起作用
- c# - TextMeshProUGUI 在播放模式下取消分配
- javascript - 不同屏幕分辨率的java脚本函数
- spring-boot - Spring Cloud Messaging Source 未向 Kafka 代理发送消息
- media-queries - 当我调整大小时,文本之间有间隙?
- c++ - 如何将 QueryThreadCycleTime() 转换为秒?