使用CSS @media print打印表格时第二页TD边框被截断如何解决

问题表现 #

表格内容跨页打印时，分页位置的单元格边框被直接截断，效果如下：

修复步骤 #

第一步：修正Blade模板的无效HTML结构 #

现有代码将<h1>头部信息直接放在<tr>标签下，没有<td>包裹，属于不符合规范的HTML结构，会导致浏览器渲染表格逻辑异常，同时建议拆分表格的表头、内容块，方便打印适配：

<!-- 头部信息移到表格外部，避免干扰表格渲染 -->
<h1>Company.</h1>
<h1>Item Summary</h1>
@foreach($c_name as $cc) 
<h1>{{{$cc->description}}}</h1>
<h1>{{{$cc->address}}}</h1>
@endforeach

<table class="table-print">
    <!-- 表头放在thead中，可配置每页自动重复 -->
    <thead>
        <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>
    </thead>
    <!-- 数据内容放在tbody中 -->
    <tbody>
        @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
    </tbody>
</table>

第二步：更新打印CSS规则 #

原CSS中body设置display: table会干扰全局分页算法，同时缺少针对表格行、边框的打印适配，修改后的规则如下：

@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;
        /* 统一边框渲染，避免断层 */
        border-collapse: collapse;
    }
    /* 表头配置：每页打印时自动重复 */
    thead {
        display: table-header-group;
    }
    tbody {
        display: table-row-group;
    }
    table { 
        page-break-inside: auto;
        width: 100%;
    }
    tr {
        /* 保证整行不会被分页切断 */
        page-break-inside: avoid;
        page-break-after: auto;
    }
    td  { 
        page-break-inside: avoid; 
        page-break-after: auto;
        /* 统一边框盒模型 */
        box-sizing: border-box;
    }
    /* 配置内容最少显示行数，避免半截内容出现在分页首尾 */
    p, tr, td {
        orphans: 3;
        widows: 3;
    }
}

验证说明 #

修改完成后清空浏览器缓存，重新触发打印即可看到分页位置不再切断单元格边框。

内容的提问来源于stack exchange，提问作者BlackLeaf