使用@media 打印在第二页上剪切的 CSS/HTML 打印表

Question

当它有第二页时，我在我的 TD 上挣扎，进入第二页时边框总是被切断 有没有人有想法使用 CSS @media 打印来解决这种问题？ 我尝试使用 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">&nbsp;&nbsp;{{{$item_number_return++}}}</td>
        <td class="label">&nbsp;&nbsp;{{{number_format($customer_return->qty) }}}</td>
        <td class="label">&nbsp;&nbsp;pcs</td>
        <td class="label">&nbsp;&nbsp;{{{$cc->date_return}}}</td>
        <td class="label">&nbsp;&nbsp;{{{$cc->plate_number}}}</td>
        <td class="label">&nbsp;&nbsp;{{{$cc->reference_number}}}</td>
        <td class="label">&nbsp;&nbsp;{{{$cc->ret_desc}}}</td>
    </tr>
    @endforeach
</table>

输出：

Answer 1

您可以使用<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 中根据需要定义所有边框。 你没有把它们包括在上面，所以我们不知道你做了什么。