Is it possible to use CSS to print pages better?

Question

I have a HTML page which is very simple, it just has a vertical table that gets data dynamically generated into it. The problem I am having is that when I want to print my page, it cuts off halfway through one of my <tr>'s, like so:

enter image description here

Is there a way to use CSS so I can somehow end a <tr> at the bottom of the page and then start the next <tr> on the second page?

I've searched the web for a solution and found nothing. For what I'm after, it wasn't very easy to clearly search for it.

Hope someone can help with this.

http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/ — tomsullivan1989, Nov 06 '13 at 15:37

score 1 · Answer 1 · answered Nov 06 '13 at 15:37

1

Use something like

tr {
    page-break-inside: avoid;
}

answered Nov 06 '13 at 15:37

Explosion Pills

188,624
52
326
405

... which many browsers don't support. – Mr Lister Nov 06 '13 at 15:38
@MrLister do you have documentation on that? I can't find much consistent documentation, but from what I read all modern browsers support it. The only complaints I've found of lack of support go back to 2010 or earlier. – Explosion Pills Nov 06 '13 at 15:45
@ExplosionPills Doesn't seem to be doing anything. I'm on Chrome 30. – Dr Robotnik Nov 06 '13 at 15:51
The [official W3C documentation](http://www.w3.org/TR/CSS2/page.html#page-break-after) still says that browsers must obey these rules for block-level elements in the root, but "may also apply these properties to other elements, e.g., 'table-row' elements." So they don't _have_ to make it work on table rows to be compliant. On my machine, Chromium and Konqueror don't. – Mr Lister Nov 06 '13 at 20:05
A paragraph (or even a sentence) or two of explanation goes a long way into making a possible correct answer into a great answer. – Jan 07 '15 at 03:07

score 0 · Answer 2 · answered Nov 06 '13 at 16:37

Here is a more reliable solution with JQuery:

$(document).ready(function () {
    $('table.splitForPrint').each(function(i, tabela){
        var per_page = 13;

        var pages = Math.ceil($('tbody tr').length / per_page);

        if (pages == 1)
            return;

        var ultimo = $(tabela);
        for(var p = 1; p <= pages; p++) {
            var copy = ultimo.clone();

            $('tbody tr', ultimo).each(function(i, tr){
                if (i >= per_page) {
                    $(tr).remove();
                }
            });

            $('tbody tr', copy).each(function(i, tr){
                if (i < per_page) {
                    $(tr).remove();
                }
            });

            if (p < pages)
                copy.insertAfter(ultimo);

            copy.css('page-break-before', 'always');

            ultimo = copy;
        }
    });
});

https://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c4

Is it possible to use CSS to print pages better?

2 Answers2