当打印页面从顶部 html 给出 div 边距时答案

【问题标题】：when print page give div margin from top html当打印页面从顶部 html 给出 div 边距时
【发布时间】：2023-03-17 19:30:01
【问题描述】：

我有一个以 div 为头部的 html 页面，并且该 div 的 css 位置是固定的现在，当我打印多页时，潜水与正文内联，只有第一页提供填充这是它的图像

第二页是这样显示的

现在我需要代码让表格始终在 div 头之后这是我的代码

    <!DOCTYPE html>
<html dir='rtl'>
<head>
<title>Print sample</title>
</head>
<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 {



#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;
    text-align: center;
}

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


}

#print-foot:after {
    content: counter(page) "من " counter(page);
    counter-increment: page;
}
</style>
<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>
            <div id="print-foot">صحفة: </div>
        </small>
    </span>
    <br />
    <u>كشف الذمم العامة بالمجاميع</u>
    <u>اسم المنطقة {{$city->city_name}} رمز المنطقة {{$city->id}}</u>
    <br />
    <br />
    <span>من تاريخ {{$request->fromDate}} الى تاريخ {{$request->toDate}}</span>
</div>
<table style='margin-top:135px;' 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>

非常感谢

【问题讨论】：

标签： javascript jquery html css printing

【解决方案1】：

添加相对于#print-head 的位置会起作用，

/* 仅打印 */

@media print {
    #print-head {
        position: relative;
    }
}

【讨论】：

我没找到你？
div head 将显示在打印的第一页而不是所有页面
所以，您可以用 div 标签包裹表格，并在该 div 中添加 padding top
我知道它可以通过 page-break-before 修复：
#print-head {page-break-before: always;}