避免分页内表行

我想避免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

避免分页内表行

回答

相关问题