Printing long tables with CSS, Is there a way to modify the caption/table header of the 2nd part of the table that broke off?

Question

So this is problem, I am building this report engine for work. The data can be long that sometimes contains a lot of tables and charts. Sometimes the tables can be very long and can appear almost anywhere in the page. If the table is long when we print it, people wants to see the table header/ caption to contain something like "Continued table from Table A" in the captions or maybe in the table header of the next page it continues. Is this possible?

<html>
<table>
    <caption>Initial Caption</caption>
    <thead>
        <th>header 1</th>
        <th>header 2 </th>
    </thead>
    <tbody>
        <tr>
            <td>column 1</td>
            <td>column 2</td>
        </tr>
        <tr>
            <td>cell 2</td>
            <td>cell 2</td>
        </tr>
    </tbody>
</table>

</html>

Now when I print it, in the off chance that it cuts off between row 1 an row 2. When the header/ caption repeat I would have "Continued page of Initial Caption" or "Continued Page ..." in the header as new row within the header

I tried doing some media="print" with CSS but nothing seems to work.

Does this answer your question? [How to deal with page breaks when printing a large HTML table](https://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table) or https://stackoverflow.com/questions/6844391/css-repeat-table-header-after-page-break-print-view — jtbandes, Dec 21 '21 at 01:36

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

When printing a table with lots of rows the problem can arise in keeping the data together when the page ends. The most logical property that can be used for this purpose is page-break in CSS.

Syntax:

name_of_the_element { name_of_the_property: value;}

For Example:

table {page-break-before: always;}

program that takes a new page when a table starts and when a new page is required while printing rows but not in between rows.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        table {page-break-before: always; 
               font-size: 100px;}
        tr{page-break-inside: avoid; 
           page-break-after: auto;}
    </style>
</head>
<body>
    hello!!
    <table>
        <tr>
            <th>s.no.</th>
            <th>name</th>
        </tr>
        <tr>
            <td> 1 </td>
            <td> apple </td>
        </tr>
        <tr>
            <td> 2 </td>
            <td> mango </td>
        </tr>
        <tr>
            <td> 3 </td>
            <td> kiwi </td>
        </tr>
        <tr>
            <td> 4 </td>
            <td> banana </td>
        </tr>  
        <tr>
            <td> 5 </td>
            <td> strawberry </td>
        </tr> 
        <tr>
            <td> 6 </td>
            <td> guava </td>
        </tr> 
        <tr>
            <td> 7 </td>
            <td> watermelon </td>
        </tr>    
    </table>
</body>
</html>

Printing long tables with CSS, Is there a way to modify the caption/table header of the 2nd part of the table that broke off?

1 Answers1