我有一个以 div 为标题的 html 页面，该 div 的 css 位置是固定的
现在当我打印多页时，潜水与 body 内联，只是第一页给出填充
这是它的图像
在第二页是这样的
现在我需要代码让表格总是在 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>
非常感谢
最佳答案
添加相对于#print-head 的位置将起作用，
/* 只打印 */
@media print {
#print-head {
position: relative;
}
}
关于javascript - 当打印页面从顶部 html 给出 div 边距时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48521441/