Page Break in HTML Table

Question

Is there any way to have a page break in a HTML table? I've been trying to get page breaks on the following HTML:

<html>
    <title>testfile</title>
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="pragma" content="no-cache" />
    <style type="text/css">
        PB {
            page-break-inside: avoid;
        }
    </style>
    </head>
    
    <body>
        <table width="100%">
            <tr>
                <td width="30%"><i>Group:</i>
                </td>
                <td width="70%">Test Group 1</td>
            </tr>
            <tr>
                <td><i>Title:</i>
                </td>
                <td><b>Test Title 1</b>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
        </table>
        <br/>
        <table width="100%">
            <PB>
                <tr>
                    <td width="30%"><i>Group:</i>
                    </td>
                    <td width="70%">Test Group 2</td>
                </tr>
                <tr>
                    <td><i>Title:</i>
                    </td>
                    <td><b>Test Title 2</b>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </PB>
        </table>
        <br/>
        <table width="100%">
            <PB>
                <tr>
                    <td width="30%"><i>Group:</i>
                    </td>
                    <td width="70%">Test Group 3</td>
                </tr>
                <tr>
                    <td><i>Title:</i>
                    </td>
                    <td><b>Test Title 3</b>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </PB>
    </body>
</html>

It works fine in FireFox but not IE10.

I have heard that IE doesn't like page breaks in tables and if this is the case, is there a work around or alternative which I can use instead?

Thanks

You could always just output an empty row to create some space. `` — Tim Lewis, Dec 04 '14 at 21:25
The code shows no attempt at *causing* a page break, and it is invalid (there is no `PB` element in HTML). — Jukka K. Korpela, Dec 04 '14 at 21:42
@JukkaK.Korpela The page-break-inside tag is used for print elements. From what I understand Tim is basically trying to setup a the page so when a user prints the table data it doesn't get cut off in the middle of the table. And yes it is invalid :) — crazymatt, Dec 04 '14 at 21:57
The question does not even say *where* page breaks should appear. — Jukka K. Korpela, Dec 04 '14 at 22:04

score 0 · Answer 1 · answered Dec 04 '14 at 21:53

Your code is set up incorrectly, you cannot call CSS with the <PB> like you have it now. You would need to structure it like this:

    <table width="100%" class="PB">
        <tr>
            <td width="30%"><i>Group:</i>
            </td>
            <td width="70%">Test Group 2</td>
        </tr>
        <tr>
            <td><i>Title:</i>
            </td>
            <td><b>Test Title 2</b>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>

The problem tho is the page-break class is set for textual elements (H1-H6, P, blockquotes, etc.) not necessarily for blocks elements so I am not sure this approach is going to work. If it does work I would make sure to test it in multiple browsers because there seems to be inconsistencies for browser support or at least what I have read.

Page Break in HTML Table

1 Answers1