blocks|key|206480|text|你有桌头吗？还有一个表体？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|206481|<table>
<tbody>
<tr><th>Name</th><th>Value</th></tr>
<tr><td>url</td><td>stackoverflow.com</td></tr>
<tr><td>ip</td><td>123.123.123.123</td></tr>
</tbody>
</table>|code-block|syntax|javascript|206482|这是表格的正确格式，虽然大多数浏览器不会在意，但像你提到的转换器可以，如果你丢失了<tbody>或<th>标签，我建议你先尝试添加它们。|offset|length|style|CODE|206483|entityMap^0|0|0|15|7|1D|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Do you have a table head? and a table body?

<pre><code>&lt;table&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Value&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;url&lt;/td&gt;&lt;td&gt;stackoverflow.com&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;ip&lt;/td&gt;&lt;td&gt;123.123.123.123&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

That is the proper formatting of a table, while most browsers couldn't care less, converters like the one you mention can, if your missing <code>&lt;tbody&gt;</code> or <code>&lt;th&gt;</code> tags i suggest you try adding those first.

blocks|key|2842911|text|除了Nanotelep所说的，这里是手动表格分页算法的工作实现。https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2842912|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack^0|W|20|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

With the addition to what Nanotelep says, here is the working implementation of manual table page breaking algorithm.
<a href="https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack" rel="nofollow">https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack</a>

blocks|key|2842938|text|上面的答案对我不起作用。我必须特别禁用我的pdfkit配置中的缩放选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2842939|PDFKit.configure+do+%7Cconfig%7C

++config.default_options+=+{
++++print_media_type:+false,
++++page_size:+"A4",
++++encoding:+"UTF-8",
++++##+Make+sure+the+zoom+option+is+not+enabled!
++++##+zoom:+'1.3',
++++disable_smart_shrinking:+false,
++++footer_right:+"Page+[page]+of+[toPage]"
++}

end|code-block|syntax|javascript|2842940|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The answers above did not work to me. I had to specifically disable the zoom option my pdfkit config.

<pre><code>PDFKit.configure do |config|

 config.default_options = {
 print_media_type: false,
 page_size: "A4",
 encoding: "UTF-8",
 ## Make sure the zoom option is not enabled!
 ## zoom: '1.3',
 disable_smart_shrinking: false,
 footer_right: "Page [page] of [toPage]"
 }

end
</code></pre>

blocks|key|2842947|text|这是老帖子，但由于我浪费了很多时间试图找到适当的解决方案，我会把它放在这里，也许它会对某些人有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2842948|所以从我所读到的，问题是|2842949|page-break-inside:+avoid|code-block|syntax|javascript|2842950|就是它不起作用。但实际上，如果您在具有display:block的元素上设置它，它将按预期工作(如SO中某处所述)。因此，对于简单的表css结构，|offset|length|style|CODE|2842951|td+div,+th+div{
++++page-break-inside:+avoid;
}|2842952|和表结构|2842953|<table>
....
<tr>
++++<td><div>some+text</div></td>
++++<td><div>more+text</div></td>
</tr>
....
</table>|2842954|会像预期的那样工作。|2842955|我有一些更复杂的行距情况，所以上面的解决方案是将它打破和平，这并不是预期的效果。我为每行跨行的行集使用div解决了这个问题。我的jquery+js完成了所有的工作：|2842956|$(window).load(function+()+{
++++var+sizes+=+{};
++++$('#the_table+tr:first+th').each(function+(a,+td)+{+++++++++
++++++++var+w+=+$(td).width();
++++++++if+(sizes.hasOwnProperty(''+%2B+a))+{
++++++++++++if+(sizes[''+%2B+a]+<+w)
++++++++++++++++sizes[''+%2B+a]+=+w;
++++++++}
++++++++else+{
++++++++++++sizes[''+%2B+a]+=+w;
++++++++}
++++});

++++var+tableClone+=+$('#the_table').clone();
++++$('#the_table').replaceWith('<div+class="container"></div>');

++++var+curentDivTable;
++++var+cDiv+=+$('.container');
++++tableClone.find('tr').each(function+(i,+ln)+{
++++++++var+line+=+$(ln);
++++++++if+(line.hasClass('main_row'))+{
++++++++++++var+div+=+$('<div+class="new-section"><table><tbody>')
++++++++++++currentDivTable+=+div.find('tbody');
++++++++++++cDiv.append(div);+++++++++++++++
++++++++}
++++++++currentDivTable.append(line);
++++});
++++//optional+-+maybe+in+%25+its+better+than+px
++++var+sum+=+0;
++++$.each(sizes,+function+(a,+b)+{
++++++++sum+%2B=+b;
++++});
++++var+widths+=+{};
++++$.each(sizes,+function+(a,+b)+{
++++++++var+p+=+Math.ceil(b+*+100+/+sum);
++++++++widths[''+%2B+a]+=+p+%2B+'%25';
++++});
++++//setup
++++$('.container+table').each(function+(a,+tbl)+{
++++++++$(tbl).find('tr:first+td,+tr:first+th').each(function+(b,+td)+{
++++++++++++$(td).width(widths[''+%2B+b]);
++++++++});
++++++++$(tbl).addClass('fixed');
++++});
});|2842957|css：|2842958|div.new-section+{
++++page-break-inside:+avoid;
}
.container,+.new-section,+.new-section+table.fixed{
++++width:+100%25;
}

.new-section+table.fixed{
++++table-layout:fixed;
}|2842959|我不知道是否一切都是必要的，我不认为它是完美的，但它可以完成工作。仅在chrome上测试|2842960|entityMap^0|0|0|0|J|D|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1B|8|@$K|1C|L|1D|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1H|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|6|7|1K|8|@]|9|@]|A|$]]|$1|12|3|13|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|14|3|15|5|6|7|1M|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|17|$]]

It is old post, but since i was wasting lot of time trying to find proper solution, i will put it here, maybe it will be useful to someone.

So from what i read, the problem with

<pre><code>page-break-inside: avoid
</code></pre>

is that it doesn't work. But actually if you set it on element that has <code>display:block</code> it works as expected (as noted somewhere in SO).
so for simple structure of table css with

<pre><code>td div, th div{
 page-break-inside: avoid;
}
</code></pre>

and table structure

<pre><code>&lt;table&gt;
....
&lt;tr&gt;
 &lt;td&gt;&lt;div&gt;some text&lt;/div&gt;&lt;/td&gt;
 &lt;td&gt;&lt;div&gt;more text&lt;/div&gt;&lt;/td&gt;
&lt;/tr&gt;
....
&lt;/table&gt;
</code></pre>

will work as expected.

I had bit more complicated case with rowspans, so the solution from above was breaking it to peaces, which wasn't desired effect. I solved it using divs for each rowspaned set of lines. My jquery js doing all the job: 

<pre><code>$(window).load(function () {
 var sizes = {};
 $('#the_table tr:first th').each(function (a, td) { 
 var w = $(td).width();
 if (sizes.hasOwnProperty('' + a)) {
 if (sizes['' + a] &lt; w)
 sizes['' + a] = w;
 }
 else {
 sizes['' + a] = w;
 }
 });

 var tableClone = $('#the_table').clone();
 $('#the_table').replaceWith('&lt;div class="container"&gt;&lt;/div&gt;');

 var curentDivTable;
 var cDiv = $('.container');
 tableClone.find('tr').each(function (i, ln) {
 var line = $(ln);
 if (line.hasClass('main_row')) {
 var div = $('&lt;div class="new-section"&gt;&lt;table&gt;&lt;tbody&gt;')
 currentDivTable = div.find('tbody');
 cDiv.append(div); 
 }
 currentDivTable.append(line);
 });
 //optional - maybe in % its better than px
 var sum = 0;
 $.each(sizes, function (a, b) {
 sum += b;
 });
 var widths = {};
 $.each(sizes, function (a, b) {
 var p = Math.ceil(b * 100 / sum);
 widths['' + a] = p + '%';
 });
 //setup
 $('.container table').each(function (a, tbl) {
 $(tbl).find('tr:first td, tr:first th').each(function (b, td) {
 $(td).width(widths['' + b]);
 });
 $(tbl).addClass('fixed');
 });
});
</code></pre>

css: 

<pre><code>div.new-section {
 page-break-inside: avoid;
}
.container, .new-section, .new-section table.fixed{
 width: 100%;
}

.new-section table.fixed{
 table-layout:fixed;
}
</code></pre>

I don't know if everything is needed and I don't think its perfect, but it does the job. Tested on chrome only

blocks|key|204267|text|我发现wkhtmltopdf+0.12.2.1以后的版本已经解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204268|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I found that wkhtmltopdf 0.12.2.1 onwards has fixed this problem.

blocks|key|204295|text|从0.12开始，这个问题已经得到了解决，但是，有时候，当一个表格太长而不能容纳在页面中时，wkhtmltopdf会将其分成两部分，并在新页面上重复列标题，这些列标题会显示为与第一行重叠。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204296|我在wkhtmltopdf+github问题部分找到了这个问题的临时解决方案：https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531|offset|length|204297|只需将以下代码行添加到视图css：|204298|tr+{
++page-break-inside:+avoid;+
}|code-block|syntax|javascript|204299|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531^0|0|13|1I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Since 0.12 this issue has been solved but, sometimes, when a table is too long to fit in the page, wkhtmltopdf breaks it in two parts and repeats the column headers on the new page and these column headers appear superposed to the first row.

I found a temporal solution to this problem on the wkhtmltopdf github issues section:
<a href="https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531" rel="noreferrer">https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531</a>

Just add this lines to your view css:

<pre><code>tr {
 page-break-inside: avoid; 
}
</code></pre>

blocks|key|2843010|text|对于任何在这方面仍然有问题的人，有一件事要记住，表必须是body的直接子级，否则css将无法工作(至少我是这样做的)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2843011|entityMap^0|O|1|S|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

For anyone still having problems with this, one thing to remember is that the table has to be a direct child of body, otherwise the css won't work (at least that's what happened with me).

blocks|key|3056028|text|我发现了这个荒谬的解决方案，但它对我来说工作得很好+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3056029|我只是放了一个很长的行跨度列，如下所示|3056030|<td+rowspan="XXX+TOTAL+ROWS"+style="width:0px"></td>|code-block|syntax|javascript|3056031|这样桌子就不会碎了。|3056032|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I found this ridiculous solution, but it's worked very well for me :)

I just put a very long rowspan column like this

<pre><code>&lt;td rowspan="XXX TOTAL ROWS" style="width:0px"&gt;&lt;/td&gt;
</code></pre>

and then the table would not break.

blocks|key|2843047|text|另一种选择是:将每个tr放在它自己的tbody中，然后将分页css规则应用于tbody。表支持多个tbody。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2843048|有一些额外的标记，但对我来说工作得很好。|2843049|entityMap^0|A|2|I|5|12|5|1D|5|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

Another option: place each <code>tr</code> in its own <code>tbody</code> and then apply the peage break css rules to the <code>tbody</code>. Tables support multiple <code>tbody</code>s.

A bit of extra markup, but works decently for me.

blocks|key|3056115|text|我尝试了对我的表格进行各种操作，但都无法阻止将分页符放在一行中间。无奈之下，我尝试了不同的版本，找到了以下几个版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3056116|Wkhtmltopdf+0.12.2.1:错误|3056117|Wkhtmltopdf+0.12.3:错误|3056118|Wkhtmltopdf+0.12.1:很好|3056119|我的解决方案是降级到0.12.1版本，这解决了我的问题。诚然，部分原因可能是因为我的html不是超级OCD，但由于HTML是在TinyMCE内部(由用户)生成的，我真的没有太多的选择。|3056120|此外，嵌套表在我的任何版本中都不起作用。|3056121|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

I tried all manner of manipulations to my tables, but nothing I tried could stop the page breaks being put into the middle of a row. 
In desperation I tried different versions, and found the following:

Wkhtmltopdf 0.12.2.1: Bad

Wkhtmltopdf 0.12.3: Bad

Wkhtmltopdf 0.12.1: Good

My solution was to downgrade to version 0.12.1, which solved my issues. Granted, they might have been partly due to not being super OCD about my html, but as the HTML is generated inside TinyMCE (by users) I don't really have much choice.

Also, nested tables don't work in any version for me.

blocks|key|208664|text|在我的特殊情况下，由于某种原因，之前的答案对我都不起作用。实际上，最终起作用的是几个因素的组合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208665|208666|我使用pip3安装(在Ubuntu16.04中)+the+Wkhtmltopdf+python+wrapper+called+pdfkit，然后使用，而不是通过apt-get安装Wkhtmltopdf我按照下面的脚本+安装了静态二进制文件(版本0.12.3|ordered-list-item|offset|length|style|BOLD|208667|208668|#!/bin/sh+sudo+apt-get+install+-y+openssl+build-essential+xorg+libssl-dev+wget+wget+http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz+tar+-xJf+wkhtmltox-0.12.3_linux-generic-amd64.tar.xz+cd+wkhtmltox+sudo+chown+root:root+/wkhtmltopdf+sudo+cp+-r+*/usr/|208669|添加了此CSS+(如此处的答案之一所建议的)：|unordered-list-item|208670|208671|tr，td+div，th+div{+page-+break+-inside:+avoid；}|208672|，然后也按照这里的建议添加<thead>和<tbody>标签(没有这些标签，表格仍然会以一种丑陋的方式中断)：|CODE|208673|208674|有了这些修改，我现在可以成功地使用Mako+templates生成超文本标记语言，然后将其提供给Wkhtmltopdf，并获得一个漂亮的分页PDF。|208675|entityMap|0|LINK|mutability|MUTABLE|url|https://pypi.python.org/pypi/pdfkit|1|http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3/_linux-generic-amd64.tar.xz|2|http://www.makotemplates.org/^0|0|0|22|Y|P|18|0|0|0|2C|2J|1|0|0|0|0|3|1G|D|7|L|7|0|0|0|22|H|E|2|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1C|8|@$F|1D|G|1E|H|I]]|9|@$F|1F|G|1G|1|1H]]|A|$]]|$1|J|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1J|8|@]|9|@$F|1K|G|1L|1|1M]]|A|$]]|$1|M|3|N|5|O|7|1N|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1P|8|@]|9|@]|A|$]]|$1|S|3|T|5|O|7|1Q|8|@$F|1R|G|1S|H|I]|$F|1T|G|1U|H|U]|$F|1V|G|1W|H|U]]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1Y|8|@$F|1Z|G|20|H|I]]|9|@$F|21|G|22|1|23]]|A|$]]|$1|Y|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]|18|$5|11|12|13|A|$14|19]]]]

In my particular case for some reason none of the previous answers worked for me. What ended up working was actually a combination of several things.

<ol>
<li>I installed (in Ubuntu 16.04) <a href="https://pypi.python.org/pypi/pdfkit" rel="nofollow noreferrer">the Wkhtmltopdf python wrapper called pdfkit</a> using pip3, and then instead of installing Wkhtmltopdf via apt-get I installed the static binary (version 0.12.3) by following the script below, <a href="https://github.com/JazzCore/python-pdfkit/blob/master/travis/before-script.sh" rel="nofollow noreferrer">taken from here</a>

<pre><code>#!/bin/sh

sudo apt-get install -y openssl build-essential xorg libssl-dev
wget http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
tar -xJf wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
cd wkhtmltox
sudo chown root:root bin/wkhtmltopdf
sudo cp -r * /usr/
</code></pre></li>
<li>Added this CSS (as suggested in one of the answers here):

<pre><code>tr, td div, th div{
 page-break-inside: avoid;
}
</code></pre></li>
<li>And then also add <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code> tags as suggested here as well (without these the table would still break in an ugly way):

<pre><code>&lt;table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;Column 1&lt;/th&gt;
 &lt;th&gt;Column 2&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;

 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;td&gt;Value 1&lt;/td&gt;
 &lt;td&gt;Value 2&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
&lt;/table&gt;
</code></pre></li>
</ol>

With these modifications I can now successfully use <a href="http://www.makotemplates.org/" rel="nofollow noreferrer">Mako templates</a> to generate the HTML and then feed that to Wkhtmltopdf and get a beautifully paginated PDF.

blocks|key|208681|text|我也面临着同样的问题，经过多次尝试，这个css解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208682|tr+{
++++display:+inline-table;
}|code-block|syntax|javascript|208683|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I was facing the same issue add after a lot of trial n errors this css solved the issue
<pre><code>tr {
 display: inline-table;
}
</code></pre>

blocks|key|208689|text|我已经深入研究这个问题好几天了，最终找到了完美的解决方案。你可以参考这个项目的phpwkhtmltopdf。查看目录article，您将找到3个问题的3个解决方案。简而言之，最终的解决方案是添加css样式|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|208690|thead+{
++++display:+table-row-group;
}
tr+{
++++page-break-before:+always;
++++page-break-after:+always;
++++page-break-inside:+avoid;
}
table+{
++++word-wrap:+break-word;
}
table+td+{
++++word-break:+break-all;
}|code-block|syntax|javascript|208691|如果您是中国人，请随时查看此站点关于wkhtmltopdf，你一定想知道这些如果您希望gist+for+wkhtmltopdf，请查看要点|208692|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/subtlephp/phpwkhtmltox|1|http://pipe.b3log.org/blogs/happyhacker/articles/2018/02/28/1519809638546|2|https://gist.github.com/lovelock/70b76ef8db5b8a2d9c3fbd9f2975523f^0|1M|7|13|E|0|0|0|G|M|1|17|K|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|M|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]|W|$5|P|Q|R|E|$S|X]]]]

I've digged into this problems for days, and finally found the perfect solution. You can reference this project <a href="https://github.com/subtlephp/phpwkhtmltox" rel="noreferrer">phpwkhtmltopdf</a>. Look into the directory <code>article</code> and you will find 3 solutions for 3 problems.
In short, the ultimate solution is add the css style

<pre><code>thead {
 display: table-row-group;
}
tr {
 page-break-before: always;
 page-break-after: always;
 page-break-inside: avoid;
}
table {
 word-wrap: break-word;
}
table td {
 word-break: break-all;
}
</code></pre>

If you're Chinese, feel free to check this site<a href="http://pipe.b3log.org/blogs/happyhacker/articles/2018/02/28/1519809638546" rel="noreferrer">关于wkhtmltopdf，你一定想知道这些</a>
Check out the gist if you wish <a href="https://gist.github.com/lovelock/70b76ef8db5b8a2d9c3fbd9f2975523f" rel="noreferrer">gist for wkhtmltopdf</a>

blocks|key|2843243|text|如何在pdf中使用分页符而不中断tr?|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2843244|以下是您可以在任何html文件中使用解决方案.....|2843245|在启动tr之后，您必须在tr中获取一个div，并将此css提供给div：|2843246|<tr>
++++++<div+style="page-break-inside:avoid+!important;+page-break-after:auto+!important;+overflow:+hidden;+display:block+!important;+width:100%25+">
+++++</tr>|code-block|syntax|javascript|2843247|entityMap^0|0|J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|V|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

How to use page breaks inside pdf without break a tr?

Here is solution that you can use in any html file.....

After start your tr you have to take a div inside the tr and give this css to the div: 

<pre><code>&lt;tr&gt;
 &lt;div style="page-break-inside:avoid !important; page-break-after:auto !important; overflow: hidden; display:block !important; width:100% "&gt;
 &lt;/tr&gt;
</code></pre>

blocks|key|204426|text|我使用一些建议的解决方案的组合解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|204427|我将表包装在一个div中，并定义了以下CSS。|204428|.wrapping-div+{
++++++++display:+block;
++++++++page-break-inside:+avoid+!important;
++++}

.wrapping-div+table,+.wrapping-div+tbody,+.wrapping-div+tr,+.wrapping-div+td,+.wrapping-div+th+{
++++++++page-break-inside:+avoid+!important;
++++}|code-block|syntax|javascript|204429|完成时的表结构定义为以下示例：|204430|<div+class="wrapping-div">
+<table>
++<tbody>
+++<tr>
++++<th>
++++++header
++++</th>
++++<td>
++++++content
++++</td>
+++</tr>
++</tbody>
+</table>
</div>|204431|我不需要在td或th标签中创建任何div。|204432|在尝试解决问题时，我注意到了一些重要的事情：|204433|204434|+tbody必须包含在表格中|unordered-list-item|204435|+div必须有display:+block|204436|当表格放不下一页时，它会自动将整个表格移动到下一页(我还没有尝试过使用大型表格)|204437|如果您只从CSS中删除“.-div+table”<>E211选择器，它将允许表格拆分为两页，但会正确呈现，不会将一个单元格拆分为两页(类似Word的默认行为)|offset|length|style|BOLD|204438|204439|我希望这能帮到你。|204440|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|B|1W|0|0|0|9|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1C|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1E|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|T|7|1I|8|@]|9|@]|A|$]]|$1|W|3|X|5|T|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1K|8|@$10|1L|11|1M|12|13]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|1O|8|@$10|1P|11|1Q|12|13]]|9|@]|A|$]]|$1|17|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|18|$]]

I solved the issue using a combination of some suggested solutions.

I wrapped my table in a div and defined the following CSS.

<pre><code>.wrapping-div {
 display: block;
 page-break-inside: avoid !important;
 }

.wrapping-div table, .wrapping-div tbody, .wrapping-div tr, .wrapping-div td, .wrapping-div th {
 page-break-inside: avoid !important;
 }
</code></pre>

The table structure when finished was defined as the following example:

<pre><code>&lt;div class="wrapping-div"&gt;
 &lt;table&gt;
 &lt;tbody&gt;
 &lt;tr&gt;
 &lt;th&gt;
 header
 &lt;/th&gt;
 &lt;td&gt;
 content
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
&lt;/div&gt;
</code></pre>

I didn't need to create any div inside the td or th tags.

Important things that I noticed while trying to solve the problem:

<ul>
<li>The tbody must be included in the table</li>
<li>The div must have display: block</li>
<li>When a table doesn't fit in a page, it will automatically move the whole table to the next page (I haven't tried this one with huge tables)</li>
<li>If you remove only the ".wrapping-div table" selector from the CSS, it will allow the table to be split in two pages, but will render it correctly, not breaking one cell in two pages (it's like the default behavior on Word)</li>
</ul>

I hope this helps.

blocks|key|2843330|text|我已经在这个问题上挣扎了很多，使用最新的h4cc/wkhtmltopdf-amd64+version+0.12.4，最后通过将包的版本降级到0.12.3来使它工作！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2843331|entityMap|0|LINK|mutability|MUTABLE|url|https://packagist.org/packages/h4cc/wkhtmltopdf-amd64#0.12.4^0|1Y|6|K|11|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

I have struggled a lot with the issue, using latest <a href="https://packagist.org/packages/h4cc/wkhtmltopdf-amd64#0.12.4" rel="nofollow noreferrer">h4cc/wkhtmltopdf-amd64 version 0.12.4</a> and finally made it working by downgrading the version of the package to <code>0.12.3</code>!

blocks|key|208781|text|为了避免分页，我们可以使用分页符避免css选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|208782|tr+{+page-break-inside:+avoid;+}|code-block|syntax|javascript|208783|拆分任何content+(图像/文本)并使其显示在next+中|offset|length|style|BOLD|208784|.sample-image+{+page-break-before:+always;+}|208785|entityMap^0|0|0|C|7|P|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

To avoid page break, We can use page break avoid css option.

<pre><code>tr { page-break-inside: avoid; }
</code></pre>

Break any content (Image/ Text) and make it appear in the next page

<pre><code>.sample-image { page-break-before: always; }
</code></pre>

blocks|key|206735|text|将此CSS添加到相应的类中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|206736|#main_div+{
++++++++position:+relative;
++++++++width:+672px;+/*+find+your+width+in+px+based+on+the+page+margins+*/
++++}
tr+td+{
++++++++page-break-before:+auto;
++++++++page-break-inside:+avoid+!important;
++++}|code-block|syntax|javascript|206737|但最重要的是为包含表(或某个父)的div容器提供一个固定的宽度，单位为像素。应该适用于大多数(WebKit)+pdf生成器，并允许它们正确计算高度。|offset|length|style|BOLD|206738|我可以用kubuntu+20.04中的wkhtmltopdf+0.12.6+(带有修补的qt)确认这对我有效|206739|entityMap^0|0|0|F|M|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Add this CSS with respective classes
<pre><code>#main_div {
 position: relative;
 width: 672px; /* find your width in px based on the page margins */
 }
tr td {
 page-break-before: auto;
 page-break-inside: avoid !important;
 }
</code></pre>
But the most important is to give to your container which contains the table (or some parent div) a fixed width in pixels. Should work for most (WebKit) pdf generators and permit them to calculate correctly the heights.
I can confirm that works for me with wkhtmltopdf 0.12.6 (with patched qt) in kubuntu 20.04

I am generating pdf report from html page with one table.

I am using wkhtmltopdf for the purpose.

when pdf is generated it breaks anywhere in tr tag.

I want to avoid it .

How to avoid page break inside table row for wkhtmltopdf

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是用一个表的从html页面生成pdf报告。为此，我使用了wkhtmltopdf。当生成pdf时，它在tr 中的任何位置中断。我想避免这种情况。

问如何避免wkhtmltopdf表格行内换页
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何避免wkhtmltopdf表格行内换页EN