Reports

If you're looking to create a table where the footer always stays fixed at the bottom of every printed page without overlapping the table content, follow these steps:

@media print {
            table {
                width: 100%;
                border-collapse: collapse;
                page-break-inside: auto;
            }

            thead {
                display: table-header-group;
            }

            tfoot {
                display: table-footer-group;
            }

            tbody {
                display: table-row-group;
            }

            tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }

            tfoot tr {
                position: fixed;
                bottom: 0;
                width: 100%;
            }

            tfoot td .footer-space {
                height: 50px; /* Reserve space for footer */
            }

            tfoot td .footer-content {
                position: fixed;
                bottom: 0;
                background-color: #f9f9f9;
                width: 100%;
                text-align: center;
                font-weight: bold;
                padding: 5px 0;
            }
        }

        table, th, td {
            border: 1px solid black;
            text-align: left;
            padding: 8px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Footer on Print</title>
</head>
<body>
    <h1>Table with Fixed Footer on Print</h1>
    <table>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
            <tr>
                <td>Data 7</td>
                <td>Data 8</td>
                <td>Data 9</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">
                    <div class="footer-space"></div> <!-- Empty div with a class -->
                    <div class="footer-content">This is the footer. It will always stay at the bottom of the printed page.</div>
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Explanation Empty Space Reservation:

The reserves space at the bottom of the table to prevent the footer from overlapping the table content. You can adjust its height as needed (e.g., 50px). Footer Disclaimer:

The contains the actual footer content. It’s positioned at the bottom of each page using position: fixed.

CSS Print Media Query:

The @media print query ensures these styles only apply during printing.

Avoiding Overlap:

By reserving space using .footer-space, the footer only overlaps the empty space at the bottom of the table, avoiding any overlap with the content.

79217347