Domanda

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.

È stato utile?

Soluzione

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

Altri suggerimenti

IE doesn't support the avoid value, so would work ok in Firefox but IE would not display the same. Do you have example of the CSS you're using?

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top