0

I have a table with header and footer, but i can't put footer on bottom page in every page as the followed image. if the footer outside the table is okay, but inside is the problem

enter image description here

My sample code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        thead {
            display: table-header-group;
        }

        tbody {
            display: table-row-group;
        }

        tfoot {
            display: table-footer-group;
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>
                    HEADER
                    <br />
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    FOOTER
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

i have tried every possible solution that I found on internet, but I don't have figured out how to do it inside a table

Marcus
  • 1
  • What exactly or you trying to do? Because I think you explained that you didn't want the footer in a seperate div, I saw it without a seperate div but it looks fine to me. – AJ Ande Jul 28 '23 at 15:49
  • So, what I am trying to do is print in every page header and footer, but the header must be at the begging and the footer on the bottom of the page. In this case, in the second page the footer isn't at the end of page. Futhermore, in my real application, i have an index at the first page and from the second page i have my produt catalog. It must begin at catalog's page, did you understand me? – Marcus Jul 28 '23 at 18:58

0 Answers0