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

时间：2017-03-24 05:23:19

标签： html css

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

我将表格中的长行分成几页。 对于TR的分页符，一切都很好。 我唯一的问题是，它从一开始就开始，到达页面的最底部，制作我的标题＆amp;页脚覆盖表数据。 我尝试在任何地方放置边距和填充，但似乎没有工作。 下面是我的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;
    }       
}

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

这是打印时的样子， enter image description here

4 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：0)

试试这个

＆＃13;
＆＃13; 
@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;
    }       
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用

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

答案 3 :(得分：0)

如果在表启动之后和启动之前遇到此类问题，则需要为其他页脚添加一些额外的空间，例如：

enter image description here

您可以通过以下方式解决它：

<style>
   @media print {
   .table-breaked {
      page-break-before: auto;
   }
   .no-border{
      border: none !important;
   }
   .footer-repeat {
      display: table-footer-group;
     }
   }
</style>


<div class="table-breaked">
 <table class="pt-20">
      <thead>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
          <!-- add extra space for printing -->
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <!-- add extra space for printing -->
         <tr>
            <th class="text-center">Value 1<br/>№ Date</th>
            <th class="text-center">Value 2</th>
            <th class="text-center">Value 3</th>
            <th class="text-center">Value 4</th>
            <th class="text-center">Value 5</th>
         </tr>
      </thead>
      <tbody>
       <!-- more trs here -->
         <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
         </tr>
      </tbody>
      <tfoot class="footer-repeat">
         <!-- add repeated tfoot for extra space -->
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
      </tfoot>
   </table>
</div>

这是结果：

enter image description here

相关问题
最新问题