避免分頁內錶行

我想避免html表格中的分頁符，當我通過wkhtmltopdf將html轉換爲PDF時。我使用page-break-inside：避免使用表格 - 它的作品，但我有很多行，然後不起作用。如果將tr設置爲塊或其他內容，則會更改表格的格式並插入雙邊框。或者可以在表格被分割的每個頁面上插入表格標題。避免分頁內錶行

來源

2012-02-15 Ankit Mittal

對不起，使用'page-break-inside：avoid;'時出現了什麼問題？ – 2012-02-15 07:29:20

@ChristianVarga當我使用page-break-inside時：避免使用tr，它不起作用 – 2012-02-15 07:52:22

試圖將它放在table元素上嗎？ – 2012-02-15 09:26:37

你可以用CSS試試這個：

<table class="print-friendly"> 
<!-- The rest of your table here --> 
</table> 

<style> 
    table.print-friendly tr td, table.print-friendly tr th { 
     page-break-inside: avoid; 
    } 
</style>

大多數CSS規則並不適用於直接<tr>標籤，因爲正是你上面所指出的 - 他們有一個獨特的display風格，這不允許這些CSS規則。但是，其中的<td>和<th>標籤通常可以使用這種規範 - 您可以很容易地將這些規則應用於所有child-<tr>和<td>，使用CSS如上所示。

來源

2012-08-08 23:00:29

+15

不幸的是，這還不能用於基於webkit的瀏覽器。 – 2013-03-12 19:17:12

是的 - 有一些古怪。請參閱@ Peter在此問題中的回答：http://stackoverflow.com/questions/7706504/page-break-inside-doesnt-work-in-chrome瞭解更多信息。 – 2013-03-13 02:08:06

它只適用於整個表，而不僅僅是tr/td：http://stackoverflow.com/a/13525758/729324 – marcovtwout 2013-12-30 13:36:38

使用CSS page-break-inside不起作用（這是一個webkit瀏覽器問題）。

有你指定一個wkhtmltopdf的JavaScript表分裂黑客打破長桌成自動根據頁面尺寸表（而不是x行的靜態值後頁面斷）：https://gist.github.com/3683510

來源

2013-01-02 16:55:40

Javascript hack沒有工作 – 2014-01-01 06:38:28

這個js黑客會工作，如果我只是想打印網頁沒有wkhtmltopdf？ – 120196 2016-08-19 03:50:08

的最佳方式我發現在WebKit瀏覽器來處理這個問題的方法是把一個div每個TD元素中，並應用頁面突破內部：避免風格到div，像這樣：

... 
<td> 
    <div class="avoid"> 
    Cell content. 
    </div> 
</td> 
... 
<style type="text/css"> 
    .avoid { 
    page-break-inside: avoid !important; 
    margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */ 
    } 
</style>

即使鉻理應做不承認'頁面中斷：避免;'屬性，這似乎使得在使用wktohtml生成PDF時，行分內容不會被分頁分成一半。 tr元素可能會暫停分頁符，但div和其中的任何內容都不會。

來源

2013-07-31 22:30:07

'margin：4px 0 4px 0;'爲我做了詭計，我偶爾失去了一個記錄感謝 – Wartodust 2015-09-24 07:26:42

不適用於我在鉻49.0.2623.87 m – Dvir 2016-03-27 17:26:22

這種方法的問題是，有時只有一行的幾個單元格被分解到下一頁，儘管每個細胞本身都不會被破壞。 – WorldSEnder 2017-03-22 12:27:43

我寫了基於艾倫·希爾的回答下面的JavaScript：

//Add a div to each table cell so these don't break across pages when printed 
//See http://stackoverflow.com/a/17982110/201648 
$(document).ready(function() { 
    var ctlTd = $('.dontSplit td'); 
    if (ctlTd.length > 0) 
    { 
     //console.log('Found ctlTd'); 
     ctlTd.wrapInner('<div class="avoidBreak" />'); 
    } 
});

凡dontSplit是類的表，你不希望TD的跨頁拆分。用下面的CSS（再次，歸因於艾倫·希爾）使用此：

.avoidBreak { 
    page-break-inside: avoid !important; 
    margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */ 
    }

這似乎是在Chrome的最新版本很好的工作。

來源

2013-09-12 00:27:12

我使用wkhtmltopdf將大型表格轉換爲PDF格式，這是唯一可以取得可接受結果的解決方案。它可能會更好（Webkit不會在分頁符後重復單元格邊界），但至少內容在那裏。謝謝！ – 2014-01-01 06:33:12

我發現的唯一途徑是每個TR元素把它放在自己的TBODY元素中，並通過CSS

來源

2014-11-30 02:34:07

這對Arch Linux上的Chromium版本40.0.2214.111（64位）比其他版本更有效。這是醜陋的，感覺哈克 - 但顯然多個'tbody'元素是有效的'表'http：// stackoverflow內。com/questions/3076708/can-we-have-multiple-tbody-in-same-table – ElDog 2015-02-24 09:57:56

這對我無效（Chrome 56.0.2924.87（64位），Mac OS 10.12.2）。 – 2017-02-20 08:06:48

我用了4像素的把戲@AaronHill上述申請分頁規則的TBODY元素（link ），它的工作非常好！我雖然使用了更簡單的css規則，但無需向表中的每個<td>添加一個類。

@media print { 
    table tbody tr td:before, 
    table tbody tr td:after { 
     content : "" ; 
     height : 4px ; 
     display : block ; 
    } 
}

來源

2015-07-14 13:42:09 phidias

不適用於dompdf – userlond 2015-10-02 07:59:05

@phidias，感謝您的代碼，解決了我的問題 – sergiodebcn 2016-04-07 07:17:30

它不起作用。 – 2017-10-20 13:16:10

與

white-space: nowrap;

風格儘量TD，以避免它打破新的生產線。

來源

2016-10-03 14:19:20 vinayakshukre

比其他解決方案簡單得多。這是一件新事物嗎？ – bendecko 2016-12-26 17:19:33

我發現解決這個問題，至少對我來說一個新的方式（Chrome操作系統版本63.0.3239.84（正式版本）（64位在MacOS塞拉利昂））

添加CSS規則父表：

table{ 
    border-collapse:collapse; 
}

，併爲TD：

tr td{ 
    page-break-inside: avoid; 
    white-space: nowrap; 
}

我居然發現對堆棧溢出這種解決方案，但它並沒有在最初的谷歌搜索顯示： CSS to stop page break inside of table row

爲了解決這個問題@ @ Ibrennan208的榮譽！

來源

2018-01-10 21:19:52

避免分頁內錶行

回答

相關問題