How to avoid page break inside table row for wkhtmltopdf

Update 17.09.2015: Check the version you are using: wkhtmltopdf 0.12.2.4 is said to fix the problem (I have not checked).

---

This is a known issue in wkhtmltopdf. The page breaking algorithm used by webkit (the WK in WKhtmltopdf) doesn't really work well for large tables. I suggest breaking the table down to smaller chunks that are more easily split to pages and using the css a lot:

table, tr, td, th, tbody, thead, tfoot {
    page-break-inside: avoid !important;
}

Also have a look at the following wkhtmltopdf issues, they have interesting comments that discuss for example the table splitting problem. There is a JS solution that programmatically splits tables in 168 that might help you (I don't use it though).

• https://code.google.com/p/wkhtmltopdf/issues/detail?id=168
• https://code.google.com/p/wkhtmltopdf/issues/detail?id=9

Update 08.11.2013 There is much discussion about this in issue 168 linked above. Someone has managed to compile a version of wkhtmltopdf that supports better table breaking, but unfortunately it seems that it's not officially released and might contain other bugs. I don't know how to get it and I don't know how to compile on Windows, but anyone interested can check for example the comment here (see new update below).

Update 24.02.2014 You will be pleased to hear that in wkhtmltopdf 0.12 this feature among others has been greatly improved. However, wait for 0.12.1 and test thoroughly before starting to use any new version, it's still a little unstable although the new guys working on with antialize are doing a Great job (ashkulz rocks)! Keep updated at wkhtmltopdf.org and github. The google code site is obsolete and being slowly migrate.

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: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531

Just add this lines to your view css:

tr {
  page-break-inside: avoid; 
}

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

page-break-inside: avoid

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

td div, th div{
    page-break-inside: avoid;
}

and table structure

<table>
....
<tr>
    <td><div>some text</div></td>
    <td><div>more text</div></td>
</tr>
....
</table>

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:

$(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] < w)
                sizes['' + a] = w;
        }
        else {
            sizes['' + 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 % 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');
    });
});

css:

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

.new-section table.fixed{
    table-layout:fixed;
}

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