Html table header duplicates with empty body between two pages

Question

I have several tables on one page, and when I open the print preview in a browser, I've got some issue as on the screenshot. It happens when one of the tables is not fit to a paper. Is there a valid CSS way to prevent this problem.

Html page to reproduce behavior:

<html>
<head>
<title>Page Title</title>
<style>

table {
        border-collapse: collapse;
        margin-bottom: 30px;
}

th, td {
    border: 1px solid #777;
}
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Header cell</th>
                <th>Header cell</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
        </tbody>
    </table>
        <table>
        <thead>
            <tr>
                <th>Header cell</th>
                <th>Header cell</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
            <tr>
                <td>Body cell</td>
                <td>Body cell</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Screenshot with issue

Are you sure about your html template url ? – Alex Sep 12 '19 at 14:52 — Alex, Sep 12 '19 at 14:52

score 1 · Answer 1 · answered Sep 12 '19 at 15:06

1

Use the page-break-inside property, it sets whether a page-break should be avoided inside a specified element.

<style>
@media print {
   table {page-break-inside: avoid;}
}
</style>

answered Sep 12 '19 at 15:06

Mike V.

2,077
8
19

Thank you. This is working, but also adding a new behavior for tables that large than a paper. – Dmitriy Romanouskiy Sep 16 '19 at 13:13
@DmitriyRomanouskiy If you do not need to repeat the title on the next page, then a simple solution is not to use block, only . – Mike V. Sep 16 '19 at 16:37

Html table header duplicates with empty body between two pages

1 Answers1