当打印页面中断时,表行将溢出表头。我尝试了page-break-inside:避免,但不起作用。
添加了一些代码,它是动态更改的。在打印中,当页面断点位于行跨部分时,总是会引起问题。
<table class="table table-bordered reportTable" id="contentToConvert">
<thead style="text-align: center" class="report-container">
<tr>
<th scope="col" rowspan="2" style="width: 10%; vertical-align: middle;">Order #</th>
<th scope="col" rowspan="2" style="width: 20%; vertical-align: middle;">Customer Information</th>
<th scope="col" rowspan="2" style="width: 9%; vertical-align: middle;">Package(s)</th>
<th scope="col" colspan="5" style="width: 61%; vertical-align: middle;">Package Information</th>
</tr>
<tr>
<th style="width: 17%; vertical-align: middle">Tracking Number</th>
<th style="width: 10%; vertical-align: middle">Size</th>
<th style="width: 10%; vertical-align: middle">Weight</th>
<th style="width: 14%; vertical-align: middle">Instructions</th>
<th style="width: 10%; vertical-align: middle">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" style="text-align: center; padding-left: 0rem; padding-right: 0rem">RetailOrder_0023
</td>
<td rowspan="3" style="padding-left: 1rem">
George Jason <br>
123 Arlington street <br>
Arlington VA 22222<br>
123-456-7890<br>
GEORGE.Jason@gmail.com
</td>
<td rowspan="3" style="text-align: center">3</td>
<td style="text-align: center; vertical-align: middle; padding: 0">5134134231231261341231</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle"></td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle">Leave at front door</td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle"></td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
</tbody>
</table>