多页打印时固定头部Div与表格排版问题及代码需求

我之前处理过不少类似的打印布局问题，你的情况很典型：fixed定位的头部在打印时会显示在每一页顶部，但表格仅第一页设置了margin-top，后续页面没有预留头部空间，就导致了重叠。下面是具体的修复方案：

核心修改思路 #

• 用页面整体内边距替代表格的固定外边距，让每一页的内容都自动避开头部区域
• 保留头部的fixed定位，确保每一页都显示头部
• 调整页码footer的定位，避免和表格内容冲突

修改后的完整代码 #

<!DOCTYPE html> 
<html dir='rtl'> 
<head> 
    <title>Print sample</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <style> 
        /*** Print sample ***/ 
        /* defaults for screen */ 
        #print-head, #print-foot { display: none; } 

        /* print only */ 
        @media print { 
            /* 给body设置顶部内边距，匹配头部高度，确保每一页内容都从头部下方开始 */
            body {
                padding-top: 135px;
                margin: 0;
            }

            #print-head { 
                display: block; 
                position: fixed; 
                top: 0pt; 
                left:0pt; 
                right: 0pt; 
                text-align: center; 
                /* 明确头部高度，确保内边距匹配 */
                height: 135px;
                background: white; /* 避免头部透明导致下面内容透出来 */
            } 

            #print-foot,.head { display: block; } 

            /* 调整footer定位到页面底部 */
            #print-foot {
                position: fixed;
                bottom: 0pt;
                left: 0pt;
                right: 0pt;
                text-align: center;
            }

            #print-foot:after { 
                content: counter(page) " من " counter(pages); 
                counter-increment: page; 
            } 

            /* 移除表格的固定margin-top，改用body的padding预留空间 */
            .table.head {
                margin-top: 0 !important;
            }
        }
    </style> 
</head> 
<body> 
    <div id="print-head"> 
        <span style='margin-right:50px;' class='pull-right thead'>شركة مصطفى الشرباتي وشركاه</span> 
        <span style='margin-left:50px;' class='pull-left'>شركة مصطفى الشرباتي وشركاه</span> 
        <br /> <br /> 
        <span class='pull-right'><small> التاريخ 3-1-2018</small></span> 
        <span class='pull-left'> <small> صحفة: </small> </span> 
        <br /> 
        <u>كشف الذمم العامة بالمجاميع</u> 
        <u>اسم المنطقة {{$city->city_name}} رمز المنطقة {{$city->id}}</u> 
        <br /> <br /> 
        <span>من تاريخ {{$request->fromDate}} الى تاريخ {{$request->toDate}}</span> 
    </div> 

    <!-- 移除了style里的margin-top:135px -->
    <table border='1' class='table head table-responsive'> 
        <thead> 
            <tr> 
                <td>اسم العميل</td> 
                <td>رقم العميل</td> 
                <td>الرصيد المدور</td> 
                <td>مدين</td> 
                <td>دائن</td> 
                <td>الرصيد</td> 
            </tr> 
        </thead> 
        <tbody> 
            @php $total = 0;$first_total = 0; $debt_total= 0; $total_re =0 ;@endphp 
            @foreach($customers as $customer) 
            <tr> 
                <td>{{$customer->customer_name}}</td> 
                <td>{{$customer->id}}</td> 
                <td> {{round($customer->getVouchers->where('voucher_date','<',$request->fromDate)->sum('voucher_amount'),3)}} 
                    @php $first_total+= $customer->getVouchers->where('voucher_date','<',$request->fromDate)->sum('voucher_amount')@endphp 
                </td> 
                <td> {{ round($customer->getVouchers()-> where('voucher_amount','>',0)-> whereBetween('voucher_date',[$request->fromDate,$request->toDate])-> sum('voucher_amount'),3) }} 
                    @php $debt_total += $customer->getVouchers()-> where('voucher_amount','>',0)-> whereBetween('voucher_date',[$request->fromDate,$request->toDate])-> sum('voucher_amount') @endphp 
                </td> 
                <td> {{ round($customer->getVouchers()-> where('voucher_amount','<',0)-> whereBetween('voucher_date',[$request->fromDate,$request->toDate])-> sum('voucher_amount'),3) * -1 }} 
                    @php $total_re += $customer->getVouchers()-> where('voucher_amount','<',0)-> whereBetween('voucher_date',[$request->fromDate,$request->toDate])-> sum('voucher_amount') @endphp 
                </td> 
                <td> 
                    @if($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') > 0) 
                        {{round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3)}} م 
                        @php $total+= round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) @endphp 
                    @elseif($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') < 0) 
                        {{round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) * -1}} د 
                        @php $total+= round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) @endphp 
                    @elseif($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') == 0) 
                        0 د 
                    @endif 
                </td> 
            </tr> 
            @endforeach 
            <tr> 
                <td colspan='2'>المجموع</td> 
                <td>{{round($first_total,3)}} م</td> 
                <td>{{round($debt_total,3)}} م</td> 
                <td>{{round($total_re,3) * -1}} د</td> 
                <td> 
                    @if($total > 0) 
                        {{round($total,3)}} م 
                    @else 
                        {{round($total,3) * - 1}} د 
                    @endif 
                </td> 
            </tr> 
        </tbody> 
    </table> 
</body> 
</html>

关键修改说明 #

1. body的padding-top：在打印媒体查询中给body设置padding-top:135px，这个值和头部的高度一致，确保每一页的内容都从头部下方开始渲染，不会和fixed头部重叠。
2. 头部添加背景色：给#print-head加上background:white，避免打印时头部透明导致下面的表格内容透出来。
3. 移除表格的margin-top：原来表格的margin-top只对第一页有效，现在用body的padding替代，所有页面都能生效。
4. footer固定到底部：把#print-foot改为fixed定位到页面底部，同时修正了页码计数器的内容（原来的counter(page) "من " counter(page)重复了，改成counter(page) " من " counter(pages)显示当前页/总页数）。

这样修改后，打印每一页时，头部都会固定在顶部，表格内容会自动从头部下方开始，不会出现重叠问题。

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