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

【问题标题】：CSS/HTML Printing Table Cut on 2nd page using @media print使用@media print 在第二页上剪切 CSS/HTML 打印表
【发布时间】：2021-12-21 19:13:51
【问题描述】：

当我的 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">&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>

输出：

【问题讨论】：

标签： html css laravel printing printf

【解决方案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 中按照需要定义所有边框。您没有将它们包括在上面，所以我们不知道您做了什么。

【讨论】：