html - 与页脚重叠的行
问题描述
我的 HTML 表格中有一行与页脚中的 div 重叠,同时在 A4 页面中打印它。如何修复它,使其可以在页脚之前中断并在下一页继续,依此类推。我用谷歌搜索并找到了很多这样的解决方案,但所有主题都对我不起作用。 打印html页面时的边距
我的风格
<head>
<style>
@media print {
h1 {
page-break-after: always;
}
div.divFooter {
position: fixed;
bottom: 0;
}
.pagebreak {
page-break-before: always;
}
table {
height: 500px;
overflow-y: scroll;
}
}
p {
white-space: pre-line;
white-space: pre-wrap;
}
#main_table,#id_table{
border: 2px solid black;
border-collapse: collapse;
table-layout: fixed;
page-break-inside: auto;
width: 100%;
text-align:center;
margin-top:-18px;
}
</style>
</head>
我的观点
<body dir="rtl" style="margin-left: 0.98in;margin-right:0.98in">
<div>
<br>
<div>
<table id="main_table" dir="rtl" border="1">
<tr style="font-size: 20px;font-weight:bold;height:40px">
<td style="width: 47.5%">first column</td>
<td style="width: 7%">second column</td>
<td style="width: 47.5%">third column</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td style="vertical-align: top;border-top:hidden;height:60vh" dir="rtl">
<p style="font-size: 16px;margin-right:25px;margin-left:25px;text-indent: 30px;text-align:right" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
<br>
</td>
</tr>
</table>
</div>
<br>
<br>
<div class="divFooter" style="width:80%;padding:25">
<hr style="width: 98%;border-radius: 5px;border: 3px solid"/>
<p style="margin-right:25px;margin-left:25px;font-size:14px">sdfsdfsd fasdfh klhasdkjf sakdljfh askjfdhsakdjfh askjdfh a </p>
</div>
</body>
它在 A4 页面打印时显示如下
解决方案
经过大量搜索后,我找到了这个链接 https://plnkr.co/edit/lWk6Yd?preview 非常使用完整
风格
/* Styles go here */
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
@page {
margin: 20mm
}
@media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
身体
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
推荐阅读
- c - 池销毁后未释放 APR 内存
- javascript - redux如何使用状态
- python - 我在 Python 中从地理编码器中提取的一些坐标没有保存在我创建的变量中
- java - 在 onCalendarPageChangeListener Android 中获取日历月份
- python - 使用网格搜索调整超参数会导致过拟合
- c++ - 两个模板类相互使用作为模板参数
- linux - 使用 sed 将每列替换为不同的间距
- c++ - 注释掉部分单独声明时的不同输出
- reactjs - React Native setState 不会导致渲染
- r - 如何使用 regr.lm 任务在 mlr 中设置多项式(自定义)公式