为每个 CSS 分页开始设置边距 [英] Set margin for every CSS page-break start

问题描述

请原谅我的标题，我找不到更准确的描述.

我将表格中的长行分成几页.TR 的分页后一切正常.我唯一的问题是，它从最开始到最底部结束，使我的页眉和页脚覆盖着表格数据.我尝试在任何地方放置边距和填充，但似乎都不起作用.下面是我的 CSS，

@media print {html，正文{宽度:210mm；高度:297mm；背景:#fff;}.页面布局 {边界:初始；边界半径:初始；宽度:初始；最小高度:初始；box-shadow:初始；背景:初始；分页后:总是；}table.report { page-break-after:auto }table.report tr { page-break-inside:avoid;分页后:自动 }table.report td { page-break-inside:avoid;分页后:自动 }table.report thead { display:table-header-group;边距顶部:50px;}table.report tfoot { display:table-footer-group }.header {显示:块；位置:固定；顶部:0px；字体粗细:粗体；字体大小:14px；文本对齐:右；右:0px;}.页脚{z-索引:1；位置:固定；左:0；底部:0；文本对齐:左；左:0；宽度:100%；显示:块；}}

下面是我的 HTML

MY HEADER
<div class="页面布局"><div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">报告标题</div><table width="100%" border="1" style="border-collapse:collapse" class="report"><头><tr><th width="10%">Col1</th><th width="60%">Col2</th><th width="10%">Col3</th><th width="20%">Col4</th></tr></thead><?php for ($x=1; $x<100; $x++) {//loop ?><tr><td align="center"><?=$x?></td><td></td><td align="center"></td><td></td></tr><?php }//endloop ?></tbody>

<div class="footer">我的页脚</div>

这是打印时的样子，

解决方案

在网上深入研究后，我发现没有正确的方法来做到这一点.有一个关于 @page rule 的讨论，这可能是我打算实现的.不幸的是它没有奏效.我了解到大多数浏览器尚未实现此功能.不知道哪个浏览器支持.最后，我遇到了一些技巧.THEAD 和 TFOOT 旨在重复打印.所以我在 thead 顶部放了一个空白行，每次重复时留一个空白行，刚好足以显示标题.还有 tfoot 下面的空行作为页脚区域.不幸的是，tfoot 并没有在 chrome 上重复.IE 和 Firefox 都可以.

Pardon me for the title, i couldn't find more accurate description for it.

I'm breaking a long rows in a table into several pages. Everything is ok with page-break-after for TR. My only problem is, it starts at very beginning and ends at very bottom of a page making my header & footer covered with table data. I tried putting margin and padding everywhere but none seems to work. Below is my CSS,

@media print {

    html, body {
        width: 210mm;
        height: 297mm;  
        background:#fff;
    }
    .page-layout {
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;           
    }       
    table.report { page-break-after:auto }
    table.report tr    { page-break-inside:avoid; page-break-after:auto }
    table.report td    { page-break-inside:avoid; page-break-after:auto }
    table.report thead { display:table-header-group; margin-top:50px; }
    table.report tfoot { display:table-footer-group }

    .header {
        display:block; 
        position:fixed; 
        top: 0px;   
        font-weight:bold;
        font-size:14px;
        text-align:right;
        right:0px;
    }
    .footer {
        z-index: 1;
        position: fixed;
        left: 0;
        bottom: 0;
        text-align: left;
        left: 0;
        width:100%;
        display:block;
    }       
}

Below is my HTML

<div class="header">MY HEADER</div> 
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>

<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>

</div>  
<div class="footer">MY FOOTER</div>

Here is what it looks like when printing,

解决方案

After intensive research on the net, i found that there is no proper way to do it. There is a discussion about @page rule that likely what i intended to achieve. Unfortunately it didn't work. I learned that this feature have not been implemented on most browser yet. I don't know which browser support it. Finally, i have came across some trick. THEAD and TFOOT are designed to repeat on print. So i put a blank row on the thead top, leaving an empty space every time it was repeated, just enough for the header to show up. And also an empty row below tfoot for footer area. Unfortunately, tfoot didn't repeat itself on chrome. IE and Firefox are ok.

这篇关于为每个 CSS 分页开始设置边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！