Вопрос

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