為每個 CSS 分頁符開始設置邊距
[英]Set margin for every CSS page-break start
問題描述
請原諒我的標題，我找不到更准確的描述。
我將表格中的一長行分成幾頁。 TR 的 page-break-after 一切正常。 我唯一的問題是，它從頁面的最開始到最底部結束，使我的頁眉和頁腳被表格數據覆蓋。 我嘗試在各處放置邊距和填充，但似乎都不起作用。 下面是我的 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>
這是打印時的樣子，
6 個解決方案
解決方案1
9 2017-03-26 01:00:47
在網上深入研究后，我發現沒有正確的方法來做到這一點。 有一個關於@page 規則的討論，這可能是我打算實現的。 不幸的是它沒有奏效。 我了解到此功能尚未在大多數瀏覽器上實現。 不知道哪個瀏覽器支持。 最后，我遇到了一些技巧。 THEAD和TFOOT旨在重復打印。 所以我把一個空白行上THEAD頂部，每次重復時留下一個空的空間，剛好夠頭露面。 在tfoot下方還有一個空行用於頁腳區域。 不幸的是， tfoot並沒有在 chrome 上重復。 IE 和 Firefox 都可以。
解決方案2
3 2020-11-26 15:24:23
如果您在表格啟動前后需要一些額外空間用於其他頁腳時遇到此類問題，如下所示：
你可以這樣修復它：
<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"> </td>
</tr>
<!-- add extra space for printing -->
<tr class="no-border">
<td class="no-border"> </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"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
</tfoot>
</table>
</div>
這是一個結果：
解決方案3
1 2020-09-17 02:52:37
您可以使用
@page{
size: A4;
margin-top: 50px;
margin-bottom: 50px;
}
解決方案4
0 2022-03-21 09:36:33
我已經能夠通過設置position: relative; top: 100px; position: relative; top: 100px; 在最頂層的元素上。
解決方案5
0 2022-12-21 14:52:54
添加 page-break-inside:avoid 到對我有用的單元格：
table td, table th {
page-break-inside: avoid;
}
解決方案6
-1 2017-03-24 07:25:04
嘗試這個
@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; } }
<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>
在不使用CSS的打印模式下，將HTML文檔設置為在每個表之間分頁
[英]Set an HTML document to page-break between each table in print mode without CSS
在Chrome中使用CSS的分頁符屬性進行打印的解決方法？
[英]Workaround to use css page-break properties in chrome for printing?
浮動的HTML / CSS打印分頁符不起作用（例如：引導程序）
[英]HTML/CSS printing page-break with float not working (eg: bootstrap)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.