Question

I have a simple table with many rows and I want to automatically insert page breaks between rows at the end of a page. This seems to work fine by default in Firefox, but Internet Explorer (7-9) doesn’t break the table. It the table is too long for one page, the rest of the table rows get lost.

So I tried to use the CSS properties page-break-* in many different ways to fix this, but nothing helped. I found that http://www.w3schools.com/cssref/pr_print_pagebb.asp says

“…avoid page-breaking properties inside tables…”

Why does it say that? My table looks like this:

<table class="formatted tablesorter">
    <caption>Some caption</caption>
    <thead>
        <tr>
            <th rowspan="1" colspan="1">Header 1</th>
            <th rowspan="1" colspan="1">Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="1" colspan="1">Value 1</td>
            <td rowspan="1" colspan="1">Value 2</td>
        </tr>
        <!-- many more rows... -->
    </tbody>
</table>

Is there any way make page breaks work inside tables for Internet Explorer? It would be okay, if I had to use some JavaScript.

Answer 1

The element that surrounded the table had overflow-x: auto; overflow-y: hidden;. That’s why the table didn’t break.