如何在Google Chrome的HTML表格中實現分頁符？

我想在HTML頁面中打印使用jQuery生成的大型表格。我使用Chrome 26.0.141。問題在於分頁符。如何在Google Chrome的HTML表格中實現分頁符？

我最初使用這個CSS

#membersList table { page-break-inside:auto; position:relative} 
#membersList tr { page-break-before:avoid; page-break-after:auto;position:relative} 
#membersList td{ border:solid 1px #CCCCCC;width:auto;position:relative} 
#membersList thead { display:table-header-group;position:relative } 
#membersList tfoot { display:table-footer-group;positioion:relative}

這個力的工作，所以我搜查，並得到該鏈接 Google Chrome Printing Page Breaks

在鏈接我使用下面的CSS屬性

基於答案之一

-webkit-region-break-inside: avoid;

但是，當我運行並檢查該元素時，默認情況下它被剔除。

會是什麼解決方案？我搜索的帖子很多。他們說最近的版本不支持分頁。如果這是真的，那麼還有什麼其他解決方案可以在Google Chrome中實現分頁？

來源

2013-07-20 sarsarahman

如果您可以使用www.jsbin.com發佈示例，它將幫助任何人提出建議。 – bitoiu

我編輯了這個問題。 – sarsarahman

@ S.A.Rahman對我的回答有幫助嗎？ –

最後我解決了這個問題。我製作了tr{display:block;} 然後我修復了單元格間距。

分頁符僅適用於塊級元素。

來源

2013-07-24 05:48:17 sarsarahman

你是如何修復細胞間距的？ – molerat

您可能需要將表分成幾個部分，並將其page-break-after css屬性設置爲always。這可以工作（使用測試版Chrome），我不知道是否有辦法在連續的表中執行此操作。

來源

2013-07-20 11:15:54 sabof

我正在動態生成表格，因此無法進行拆分。 – sarsarahman

難道你不能每隔x行插入一個分隔符？服務器端還是客戶端？有一些CSS欺騙，可能沒有明顯的區別。 – sabof

我不知道行內容，因爲少數行可能包含比其他更多的數據。所有的行甚至沒有這個問題。 – sarsarahman

上MDN說：

WebKit瀏覽器不支持此屬性;但其中一些的非標準-webkit-column-break-after和-webkit-region-break-after-after 具有與page-break-after類似的參數。

所以你需要使用page-break-after與適合你的最好的一些價值。以下是其中的一些：

page-break-after CSS屬性調整當前元素後的分頁符。

汽車： 初始值。自動分頁符（既不強制也不禁止）。

總是： 總是在元素之後強制分頁符。

避免： 避免元素後的分頁符。

left： 在元素之後強制分頁，以便下一頁被格式化爲左頁。

right： 在元素之後強制分頁，以便下一頁被格式化爲右頁。

您還可以使用break-after屬性：

的突破後的CSS屬性介紹如何生成框後的頁面，列或區域斷開行爲。如果沒有生成框，則該屬性被忽略。

來源

2013-07-20 11:21:37

你檢查了我以前的代碼嗎？我嘗試了你所描述的，但是這個功能對我來說很有用。請檢查我的代碼，並告訴我是否有任何問題。 – sarsarahman

最後我解決了這個問題。我做了'tr {display：block;}'，然後我修正了單元格間距。分頁符僅適用於塊級元素。 – sarsarahman

我爲qt提供了一些補丁來改善表分頁符。你可能希望退房問題168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13

來源

2013-07-20 11:39:08

我是一個新手，這聽起來像希臘和拉丁。請你簡單解釋一下。 – sarsarahman

最後我解決了這個問題。我做了'tr {display：block;}'然後我修復了單元格間距。分頁符僅適用於塊級元素。 – sarsarahman

我已經使用類似幾個表的東西來使這件事發生@sabof提到。假設我希望11行應該出現在頁面上。

<table> 
    11 * <tr></tr> 
</table> 
<table> 
    11 * <tr></tr> 
</table>

HTML標記;

<div id="printSection"> 
    <div> 

    </div> 
</div>

我動態地創建了行，所以JQuery邏輯如下;

var j = 23; 

for (var i = 0; i < j; i++) { 

    if (i != 0 && i % 11 == 0) { 

     $("#printSection div").append("<table><tbody></tbody></table>");    
    }    

    var node = "<tr><td>Your Data</td></tr>"; 
    $("#printSection tbody").last().append(node); 
    } 
}

CSS是這樣的;

#printSection table {    
     page-break-after: always; 
     page-break-inside: avoid; 
     break-inside: avoid; 
    }

來源

2016-02-11 21:03:35 Mahib

如何在Google Chrome的HTML表格中實現分頁符？

回答

相關問題