为每个 CSS 分页开始设置边距

Question

为每个 CSS 分页开始设置边距

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

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

Run Code Online (Sandbox Code Playgroud)

下面是我的 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>

Run Code Online (Sandbox Code Playgroud)

这是打印时的样子，

Answer 1

Avt*_*ili 11

如果在表启动前后需要一些额外空间用于其他页脚时遇到此类问题，如下所示：

\n

你可以这样修复它：

\n

<style>\n   @media print {\n   .table-breaked {\n      page-break-before: auto;\n   }\n   .no-border{\n      border: none !important;\n   }\n   .footer-repeat {\n      display: table-footer-group;\n     }\n   }\n</style>\n\n\n<div class="table-breaked">\n <table class="pt-20">\n      <thead>\n         <tr class="no-border">\n            <td class="no-border">&nbsp;</td>\n         </tr>\n          <!-- add extra space for printing -->\n         <tr class="no-border">\n            <td class="no-border">&nbsp;</td>\n         </tr>\n         <!-- add extra space for printing -->\n         <tr>\n            <th class="text-center">Value 1<br/>\xe2\x84\x96 Date</th>\n            <th class="text-center">Value 2</th>\n            <th class="text-center">Value 3</th>\n            <th class="text-center">Value 4</th>\n            <th class="text-center">Value 5</th>\n         </tr>\n      </thead>\n      <tbody>\n       <!-- more trs here -->\n         <tr>\n            <th>Data</th>\n            <th>Data</th>\n            <th>Data</th>\n            <th>Data</th>\n            <th>Data</th>\n         </tr>\n      </tbody>\n      <tfoot class="footer-repeat">\n         <!-- add repeated tfoot for extra space -->\n         <tr class="no-border">\n            <td class="no-border">&nbsp;</td>\n         </tr>\n         <tr class="no-border">\n            <td class="no-border">&nbsp;</td>\n         </tr>\n         <tr class="no-border">\n            <td class="no-border">&nbsp;</td>\n         </tr>\n         <tr class="no-border">\n            <td class="no-border">&nbsp;</td>\n         </tr>\n         <tr class="no-border">\n            <td class="no-border">&nbsp;</td>\n         </tr>\n      </tfoot>\n   </table>\n</div>\n

Run Code Online (Sandbox Code Playgroud)\n

这是一个结果：

\n

但是如何不在第一页上显示前 2 行额外的行。现在留下了很大的空白空间 (3认同)

Answer 2

luc*_*mma 9

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

Answer 3

小智 7

您可以使用

@page{
  size: A4;
  margin-top: 50px;
  margin-bottom: 50px;
}

Run Code Online (Sandbox Code Playgroud)

这只是调整边距。固定定位的页脚仍然与内容重叠 (12认同)

Answer 4

Oke*_*ega -1

尝试这个

@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;
    }       
}

Run Code Online (Sandbox Code Playgroud)

<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>
<tr>
<td align="center">1</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">9</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">10</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">11</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">12</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">13</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">14</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">15</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">16</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">17</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">18</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">19</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">20</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">21</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">22</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">23</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">24</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">25</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">26</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">27</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">28</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">29</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">30</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">31</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">32</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">33</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">34</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">35</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">36</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">37</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">38</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">39</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">40</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">41</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">42</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">43</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">44</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">45</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">46</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">47</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">48</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">49</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">50</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">51</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">52</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">53</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">54</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">55</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">56</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">57</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">58</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">59</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">60</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">61</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">62</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">63</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">64</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">65</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">66</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">67</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">68</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">69</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">70</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">71</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">72</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">73</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">74</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">75</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">76</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">77</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">78</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">79</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">80</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">81</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">82</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">83</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">84</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">85</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">86</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">87</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">88</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">89</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">90</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">91</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">92</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">93</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">94</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">95</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">96</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">97</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">98</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">99</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
</tbody>
</table>

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，11 月前
查看次数：	19861 次
最近记录：	5 年，3 月前