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

Question

Im struggling on my TD when it has 2nd page continues, border always cut when entering the 2nd page does any one has the idea to solve this kind of problem using CSS @media print? i tried using page-break-inside but it didnt solve my problem issue please help

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 Blade:

<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>

Output:

Answer 1

You can use the <thead> tag to add a table header. The header will then be applied to the top of each new page, allowing for a solid top border.

Also, your company/item summary information should probably be defined outside the table, not randomly stuck inside a <tr> tag.

<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>

Just make sure all borders are defined as desired in the CSS. You didn't include them above, so we don't know what you've done.