如何在打印大型HTML表格時處理分頁符

218

我的問題是表打印在多頁的方式。它有時會將一行切成兩半，使其不可讀，因爲其中一半位於頁面的出血邊緣，其餘的位於下一頁的頂部。

唯一可行的解決方案，我能想到是用堆疊的DIV來代替，如果需要一張桌子和力頁遊..但之前通過整個變化會我以爲我可以問前這裏。

2009-11-19 h3.

+21

在一個正切值上，可能值得在表中添加一個''，其中包含以下css'thead {display：table-header-group; }'以便在隨後的所有頁面上打印表頭（對於loooooong數據表有用）。 – 2009-11-19 14:38:26

218

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tbody> 
     <tr> 
      <td>x</td> 
     </tr> 
     <tr> 
      <td>x</td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

來源

2009-11-19 14:31:42

這不適用於所有瀏覽器。它似乎在FireFox 3.6 Mac OS中有效。 – daustin777 2010-10-08 14:23:31

不幸的是，它似乎無法在FF4 @ W7 – 2011-05-08 14:15:56

+14

這也失敗了WebKit瀏覽器（例如Safari和Chrome） – 2012-03-14 19:51:03

使用這些CSS屬性：

page-break-after 

page-break-before

例如：

<html> 
<head> 
<style> 
@media print 
{ 
table {page-break-after:always} 
} 
</style> 
</head> 

<body> 
.... 
</body> 
</html>

via

來源

2009-11-19 14:26:00 marcgg

它適用於表格行嗎？ – 2009-11-19 14:27:00

我不確定，你必須檢查。如果沒有，分割成不同的數組，並用空的div – marcgg 2009-11-19 14:27:34

（或「table」元素）將數組分開 – marcgg 2009-11-19 14:28:24

注：使用分頁-後，當：總是爲標記它將在表的最後一位之後創建一個分頁符，在末尾創建一個完全空白的頁面時間！要解決這個問題，只需將其更改爲page-break-after：auto。它會正確打破，而不是創建一個額外的空白頁面。

<html> 
<head> 
<style> 
@media print 
{ 
    table { page-break-after:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    td { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
} 
</style> 
</head> 

<body> 
.... 
</body> 
</html>

來源

2011-10-14 05:07:46

非常感謝！這是唯一的工作！ – Maria 2016-11-23 07:22:34

在Chrome上適用於我，是一個不錯的普通CSS解決方案。 – Ryan 2017-02-14 09:28:26

從思南Ünür解決方案擴展：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    div { page-break-inside:avoid; } /* This is the key */ 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

看來，分頁，裏面：避免在某些瀏覽器只考慮採取塊元素，而不是細胞，表，行也不inline-block的。

如果試圖爲display：block TR標記，並使用有分頁，裏面：避免，它的工作原理，但與你的表格佈局遊手好閒。

來源

2013-09-11 14:03:43 vicenteherrera

下面是使用jquery動態添加div的簡單方法：'$（document）.ready（function（）{$（「table tbody th，table tbody td」）。wrapInner（「

」）;}）;' – 2014-09-11 05:26:26

謝謝@ Chrisbloom7，這可能非常有用！ ;-) – vicenteherrera 2014-09-12 11:15:45

感謝sinanürün，vicenteherrera和Chrisbloom7。我應用了你的答案的組合，現在它的工作！ – 2016-08-03 08:31:41

的答案都不在Chrome這裏爲我工作。 AAverin在GitHub上創造some useful Javascript for this purpose這個工作對我來說：

的JS只需添加到您的代碼和類「splitForPrint」添加到您的表，它會在桌子整齊地分割成多個頁面，並在表頭添加到每個頁。

來源

2013-11-15 16:25:21 MDave

您有關於如何應用此示例的示例嗎？我一直試圖將我的表className指定爲'splitForPrint'，但在JS中沒有任何地方使用className'splitForPrint'引用元素。只有'var splitClassName ='splitForPrint';'就是這樣的部分。 – 2014-08-20 03:05:12

向下投票是因爲您鏈接的腳本不能解決OP的問題而沒有相當多的挑選和重新配置，並且您沒有提供任何關於如何執行此操作的示例。 – 2014-09-12 15:05:45

在Mac上的Chrome v39上無法正常工作 – sirjay 2014-12-09 08:44:50

-2

接受的答案並沒有在所有瀏覽器爲我工作，但下面的CSS爲我所做的工作：

tr  
{ 
    display: table-row-group; 
    page-break-inside:avoid; 
    page-break-after:auto; 
}

HTML結構爲：

<table> 
    <thead> 
    <tr></tr> 
    </thead> 
    <tbody> 
    <tr></tr> 
    <tr></tr> 
    ... 
    </tbody> 
</table>

在我的情況下，有一些thead tr的其他問題，但是這解決了保持錶行不被打破的原始問題。

由於頭的問題，我最終結束了：

#theTable td * 
{ 
    page-break-inside:avoid; 
}

這並沒有阻止破行;只是每個單元的內容。

來源

2015-04-01 19:20:14

我最近有一個很好的解決方案解決了這個問題。

的CSS：

.avoidBreak { 
    border: 2px solid; 
    page-break-inside:avoid; 
}

JS：

function Print(){ 
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") }); 
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>"); 
    window.print(); 
}

就像一個魅力！

來源

2015-06-30 15:25:53

我檢查了很多解決方案，任何人都不太好。

於是，我一個小竅門，它的工作原理：風格

TFOOT：position: fixed; bottom: 0px; 被放置在最後一頁的底部，但如果頁腳太高它是由表中的內容重疊。

TFOOT只有：display: table-footer-group; 是不重疊的，但不是最後一頁的底部...

讓我們放了兩個TFOOT：

TFOOT.placer { 
 
    display: table-footer-group; 
 
    height: 130px; 
 
} 
 

 
TFOOT.contenter { 
 
    display: table-footer-group; 
 
    position: fixed; 
 
    bottom: 0px; \t 
 
    height: 130px; 
 
}

<TFOOT class='placer'> 
 
    <TR> 
 
    <TD> 
 
     <!-- empty here 
 
--> 
 
    </TD> 
 
    </TR> 
 
</TFOOT> \t 
 
<TFOOT class='contenter'> 
 
    <TR> 
 
    <TD> 
 
     your long text or high image here 
 
    </TD> 
 
    </TR> 
 
</TFOOT>

一保留在非最後一頁的地方，第二次放入你的慣用腳。

來源

2015-07-28 23:58:08

我結束了@ vicenteherrera的方法，並進行了一些調整（可能是引導3特定的）。

基本上;我們不能打破tr s或td s，因爲它們不是塊級元素。因此，我們將div嵌入到每個中，並將規則應用於div。其次;我們在每個div的頂部添加一些填充，以補償任何樣式文物。

<style> 
    @media print { 
     /* avoid cutting tr's in half */ 
     th div, td div { 
      margin-top:-8px; 
      padding-top:8px; 
      page-break-inside:avoid; 
     } 
    } 
</style> 
<script> 
    $(document).ready(function(){ 
     // Wrap each tr and td's content within a div 
     // (todo: add logic so we only do this when printing) 
     $("table tbody th, table tbody td").wrapInner("<div></div>"); 
    }) 
</script>

邊距和填充調整是抵消引入的某種抖動所必需的（我的猜測 - 從bootstrap）。我不確定我是否從這個問題的其他答案中提出了任何新的解決方案，但我想這可能會幫助某人。

來源

2016-06-22 17:15:32 Aaron

-1

我已經嘗試了上面給出的所有建議，並找到了針對此問題的簡單和可用的跨瀏覽器解決方案。此解決方案不需要任何樣式或分頁符。對於解決方案，表的格式應該是這樣的：

<table> 
    <thead> <!-- there should be <thead> tag--> 
     <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>--> 
    </thead> 
    <tbody><!---<tbody>also must--> 
     <tr> 
      <td>data</td> 
     </tr> 
     <!--100 more rows--> 
    </tbody> 
</table>

上面的格式測試和跨瀏覽器

來源

2017-03-13 06:42:30

不適用於鉻（至少） – AriWais 2017-05-11 18:28:53

好，大家好工作......大多數解決方案在這裏都沒有工作了。所以，這是怎麼工作對我來說..

HTML

<table> 
    <thead> 
    <tr> 
    <th style="border:none;height:26px;"></th> 
    <th style="border:none;height:26px;"></th> 
    . 
    . 
    </tr> 
    <tr> 
    <th style="border:1px solid black">ABC</th> 
    <th style="border:1px solid black">ABC</th> 
    . 
    . 
    <tr> 
    </thead> 
<tbody> 

    //YOUR CODE 

</tbody> 
</table>

第一組頭被用作虛擬一個，這樣不會有在第二頭缺少頂部邊框（即原頭），而分頁符。

來源

2017-07-06 07:41:53 Aneesh

如何在打印大型HTML表格時處理分頁符

回答

相關問題