'Table Style on Print with rowspan

I have a problem trying to stylize a table on print layout.

I have a style on the first row that should be visible in every new page, and a style in the td with a rowspan > 1.

What happened on printing is that the row break and continue in the new page and I lose the style of the table header that is replaced by the style of the td. Can I avoid this?

I've prepared a code for you to try (print preview on A4 horizontal with chrome) and a picture of the problem:

<html>
<head>
    <style>
        td{
            font-size: 1.2em;
            page-break-inside: avoid;
        }
        tr th:first-child{
            background-color: lightcoral;
        }
        td,th{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style='background-color: lightcyan' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightpink' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightcyan' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightpink' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightcyan' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightpink' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightcyan' rowspan=7>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightpink' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightcyan' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td style='background-color: lightpink' rowspan=3>Main CELL</td>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>
            <tr>
                <td>some content...</td>
                <td>some content...</td>
            </tr>


        </tbody>
    </table>
</body>
</html>

Picture of The problem

htmlcssprinting


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions