首页 > 解决方案 > 使用@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">&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>

输出: 在此处输入图像描述

标签: htmlcsslaravelprintingprintf

解决方案


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


推荐阅读