Workaround for <thead> and <tfoot> being printed on every page in webkit

Question

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?

Answer 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