如何使用分頁符打印大型HTML表格？

我想打印一個大的HTML表格，而不是在每頁結尾處制動它的行。我使用下面的代碼，但它不工作。如何使用分頁符打印大型HTML表格？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</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> 

<body> 
<table border="1"> 
<?php 
for($i=0;$i<50;$i++){ 
?> 



    <tr> 
     <td height="50" width="130">gukgu</td> 
     <td height="50" width="180" height="50" width="145">gukgu</td> 
     <td height="50" width="130">gukgu</td> 
     <td height="50" width="180" height="50" width="145">gukgu</td> 
</tr> 
    <?php 
    } 
    ?> 
</table> 
</body> 
</html>

有人可以幫忙嗎？

來源

2013-03-11 Harsh

普通傢伙。請給我一個答案。我有一個陡峭的截止日期。 – Harsh 2013-03-11 06:23:48

您可以嘗試使用orphans指定要留在頁面底部的空行數量;如果元素的佈局與orphans設置衝突，則元素將打印在下一頁上。瀏覽器支持雖然很低劣。我想將它放在tr爲你的榜樣，像這樣：
tr{orphans:3}

來源

2013-03-11 06:41:37 albert

嘗試

<table border="1"> 
    <?php for($i=0;$i<50;$i++) { ?> 
    <tr> 
     <td height="50" width="130">gukgu</td> 
     <td height="50" width="180" height="50" width="145">gukgu</td> 
     <td height="50" width="130">gukgu</td> 
     <td height="50" width="180" height="50" width="145">gukgu</td> 
    </tr> 
    <?php } ?> 
</table>

你有表標籤內for循環把前for循環。

來源

2013-03-11 05:24:06

仍然無法正常工作 – Harsh 2013-03-11 05:37:02

@哈爾什麼你想要..？你能爲我創造視覺嗎？ – 2013-03-11 05:37:57

當這個表在網頁中打印時由於頁面結尾而導致行中斷。我想將這些原料移到下一頁以避免制動 – Harsh 2013-03-11 05:43:35

，我遲到了來此討論，但我也有類似的問題，這是我能找到的最接近的討論。我已經解決了我自己的問題，並希望與下一個人分享。

我需要打印一個大的表格，它被分成若干行。每個段以段標題行開始，接着是約5個數據行。我不想在任何分段內分頁，但我想做想讓列在整個表格中排列。 CSS「page-break-inside:avoid」屬性僅適用於頂級塊元素，因此我無法在<table>內使用<div>來控制分頁。

但我可以使用<tbody>！顯然，在現代瀏覽器中，<table>元素只是用於對各個表格部件進行分組的控制功能，而不是塊元素，並且<tbody>是實際的塊元素。所以page-break-inside:avoid就可以工作。此外，其合法的在一個<table>內有多個<tbody>標籤。

這就是祕密：對錶中的每個部分使用單獨的<tbody>，每個部分都帶有「page-break-inside:avoid」CSS屬性。

有一些併發症。首先，IE11似乎需要一個「orphans:5」CSS屬性才能正常工作。其次，我嘗試使用<thead>作爲分段標題行，給它一個「page-break-after: avoid」屬性，但我遇到了很多跨瀏覽器問題，所以我最終只是將分段標題放入其對應的<tbody>標記中。它工作正常。

CSS：

tbody.segment { 
     page-break-inside: avoid; 
     orphans: 5; 
    } 
    th.segment { 
     border: thin solid black; 
    }

HTML：

<table> 
     <tbody class="segment"> 
      <tr><th class="segment" colspan="3">Segment 1</th></tr> 
      <tr><td>data1aa</td><td>data1ab</td><td>data1ac</td><tr> 
      ... 
      <tr><td>data1za</td><td>data1zb</td><td>data1zc</td><tr> 
     </tbody> 
     <tbody class="segment"> 
      <tr><th class="segment" colspan="3">Segment 2</th></tr> 
      <tr><td>data2aa</td><td>data2ab</td><td>data2ac</td><tr> 
      ... 
      <tr><td>data2za</td><td>data2zb</td><td>data2zc</td><tr> 
     </tbody> 
    </table>

來源

2014-04-07 00:08:11

所有流行的桌面瀏覽器是不基於WebKit的（如Firefox和Internet Explorer）現在都支持對CSS聲明page-break-inside: avoid;<tr>元素，它解決了OP在這些瀏覽器中的問題。 Webkit支持顯然僅限於塊元素，所以這個問題在技術上還沒有解決，但Chrome，Safari和Opera（我敢肯定，這裏發佈的其他解決方案都不會有幫助）。但是，通過將表格轉換爲一堆不可破壞的塊，可以模擬所需的行爲。如果使用固定的列寬，那麼可以用純CSS完成的，就像這樣：

<style> 
    table {border-collapse: collapse;} 
    table > tbody > tr { 
    display: block; 
    page-break-inside: avoid; 
    } 
    table > tbody > tr > td { 
    border: 2px solid black; 
    width: 100px; 
    max-width: 100px; 
    } 
    table > tbody > tr:first-child ~ tr > td {border-top: none;} 
</style> 

<table> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    <td>Multiple<br/>lines of<br/>data</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    <td>Multiple<br/>lines of<br/>data</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    <td>Multiple<br/>lines of<br/>data</td> 
    </tr> 
</table>

如果你不希望使用固定的列寬，那麼你就必須使用JavaScript來確保列寬度不會因行而異。我的answer to another post演示了這樣做的一種方法，但它包含重複表頭，這使得它比在這種情況下需要更復雜。儘管如此，仍然值得一看。

來源

2014-09-10 19:13:57 DoctorDestructo

如何使用分頁符打印大型HTML表格？

回答

相關問題