質問

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.

役に立ちましたか?

解決

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

他のヒント

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?

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top