Chevauchement du footer sur le contenu du tableau

Abdelaziz DJEBBAR (Passion TEC)
Les bases HTML/CSS

Lorsque j'imprime une page contenant un tableau, le footer se chevauche avec le contenu du tableau. J'ai ajouté un espace au bas de la page pour le footer, mais cela ne semble pas suffisant. Le tableau est partiellement masqué par le footer, rendant certaines informations illisibles. Comment puis-je ajuster le code pour garantir que le footer ne chevauche pas le tableau en mode impression ?

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page avec Tableau</title>
    <style>
        @page {
            size: A4;
            margin: 5mm; /* Marges de la page pour le contenu principal */
        }

        @media print {
            thead {display: table-header-group;}

            body {
                margin: 0;
                padding: 0;
            }

            .content {
                margin-bottom: 70mm; /* Assure qu'il y a un espace pour le footer */
            }

            .footer {
                position: fixed;
                height: 70mm; /* Hauteur du footer */
                left: 0;
                width: 100%;
                text-align: center;
                font-size: 14px;
                padding: 5mm;
                bottom: 0; /* Position fixe en bas de la page */
                box-sizing: border-box; /* Inclut le padding dans la hauteur totale */
            }

            table {
                page-break-inside: auto; /* Permet de couper les tableaux à la page */
            }

            tr {
                page-break-inside: auto; /* Permet de couper les lignes du tableau à la page */
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <table border="1" width="100%" cellspacing="0" cellpadding="5">
            <thead>
                <tr>
                    <th>Colonne 1</th>
                    <th>Colonne 2</th>
                    <th>Colonne 3</th>
                    <th>Colonne 4</th>
                </tr>
            </thead>
            <tbody>
                <?php
                for ($i = 1; $i <= 60; $i++) {
                    echo "<tr>";
                    echo "<td>Ligne $i, Col 1</td>";
                    echo "<td>Ligne $i, Col 2</td>";
                    echo "<td>Ligne $i, Col 3</td>";
                    echo "<td>Ligne $i, Col 4</td>";
                    echo "</tr>";
                }
                ?>
            </tbody>
        </table>
    </div>

<div class="footer" style="color: red; font-weight: bold;">
    Footer content here.
</div>

</body>
</html>

Ce que je veux
aucun chevaucehemnt entre footer et content , affichage de footer sur toutes les pages d'impression , le tableau continue sur la deuxieme page en laissant 70mm de marge en bas pour le footer s'affiche normalement
Ce que j'obtiens

un chevauchement entre les données du tableau et le bas de page

Aucune réponse