2

WebKit prints <thead> and <tfoot> only on the first page. According to W3 <thead> and <tfoot>:

When long tables are printed, the table head and foot information may be repeated on each page that contains table data

We are using Rotativa which is based on WebKit for rendering PDF and having issues with thead and tfoot not being rended on every page.

Is there any workaround or toggle to solve this?

veeroo
  • 752
  • 6
  • 25
  • 2
    "When long tables are printed, the table head and foot information **may** be repeated on each page that contains table data." - There is no requirement for a user agent to repeat them, so it's wrong to call it a bug. Original definitions of "may", "must" etc [are here](http://www.ietf.org/rfc/rfc2119.txt) – James Thorpe Nov 24 '14 at 09:34
  • Does [this CSS](http://www.terminally-incoherent.com/blog/2009/10/12/repeating-html-table-headers-on-each-printed-page/) help at all? – James Thorpe Nov 24 '14 at 09:41
  • Unfortunately, no. It's not working in Webkit – veeroo Nov 24 '14 at 09:46
  • 1
    I don't think there is a solution for this. You could check if there is a feature request or issue at _Rotativa_ and if not open an issue there. Maybe with a link to [Bug 17205 - THEAD & TFOOT should be printed on every page](https://bugs.webkit.org/show_bug.cgi?id=17205) or [Issue 24826: Repeating table headers on printed pages](https://code.google.com/p/chromium/issues/detail?id=24826) and maybe also [Table header (thead) wont appear on every page when print on Chrome #13544](https://github.com/twbs/bootstrap/issues/13544) – t.niese Nov 24 '14 at 09:57

1 Answers1

1

BEGIN HACK

Finally, I used following JS script to split my table into multiple pages:

<script>
    function splitTable(table, maxHeight, firstPageMaxHeight) {
        var header = table.children("thead");
        if (!header.length)
            return;

        var headerHeight = header.outerHeight();
        var header = header.detach();

        var splitIndices = [0];
        var rows = table.children("tbody").children();

        maxHeight -= headerHeight;
        var currHeight = 0;
        var firstPage = true;
        rows.each(function (i, row) {
            currHeight += $(rows[i]).outerHeight();
            if (firstPage) {
                currHeight += (maxHeight - firstPageMaxHeight);
                firstPage = false;
            }
            if (currHeight > maxHeight) {
                splitIndices.push(i);
                currHeight = $(rows[i]).outerHeight();

            }
        });
        splitIndices.push(undefined);

        table = table.replaceWith('<div id="_split_table_wrapper"></div>');
        table.empty();

        for (var i = 0; i < splitIndices.length - 1; i++) {
            var newTable = table.clone();
            header.clone().appendTo(newTable);
            $('<tbody />').appendTo(newTable);
            rows.slice(splitIndices[i], splitIndices[i + 1]).appendTo(newTable.children('tbody'));
            newTable.appendTo("#_split_table_wrapper");
            if (splitIndices[i + 1] !== undefined) {
                $('<div style="page-break-after: always; margin:0; padding:0; border: none;"></div>').appendTo("#_split_table_wrapper");
            }
        }
    }

    $(document).ready(function () {
        splitTable($(".po-report"), 2100, 600);
    });
</script>

END HACK

veeroo
  • 752
  • 6
  • 25