Tenho uma página html que traz do banco uma lista de dados e gera um pdf, e gostaria que em todas as páginas tenha o cabeçalho e o rodapé fixo se tiver 1 ou 2 páginas de dados preenchidos na tabela, o jeito que está no exemplo do código ele está bugando no footer e o cabeçalho não aparece na segunda página. Estou utilizando dompdf para gerar o PDF
<!DOCTYPE html>
<html>
<body>
<head>
<div>
<table style="min-width: 100%">
<tr style="text-align:center">
<td rowspan="2" colspan="1"><img src="{{ base_path() }}/resources/assets/icon0.png" alt="brasao"
width="72" height="72"></td>
<td rowspan="2" colspan="4">
<h3 style="margin-bottom: 0;">Titulo</h3>
</td>
<td rowspan="2" colspan="2"><img src="{{ base_path() }}/resources/assets/icon1.png" alt="brasao2"
width="72" height="72">
</td>
</tr>
</table>
</div>
</head>
<table style=" border-collapse: collapse; border: 1px solid black; text-align: left; padding: 5px; min-width: 100%;"">
<tr>
<th style=" border-collapse: collapse; padding: 15px; border: 1px solid black;">NOME</th>
<th style=" border-collapse: collapse; padding: 15px; border: 1px solid black;">CPF</th>
<th style=" border-collapse: collapse; padding: 15px; border: 1px solid black;">TELEFONE</th>
<th style=" border-collapse: collapse; padding: 15px; border: 1px solid black;">ENDEREÇO</th>
</tr>
<tbody>
@foreach($test as $test)
<tr>
<td
style=" border-collapse: collapse; padding: 15px; border: 1px solid black; text-transform: uppercase;">
</td>
<td style=" border-collapse: collapse; padding: 15px; border: 1px solid black;"></td>
<td style=" border-collapse: collapse; padding: 15px; border: 1px solid black;"></td>
<td style=" border-collapse: collapse; padding: 15px; border: 1px solid black; text-transform: uppercase;">
</td>
</tr>
@endforeach
</tbody>
</table>
<footer class="rodape">
<p>© nome do site - <?php echo date("d/m/Y H:i"); ?></p>
</footer>
</body>
</html>
<style>
p,
h3 {
text-align: center;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
footer.rodape {
width: 100%;
position: fixed;
bottom: 0;
right: 0;
background: black;
height: 40px;
display: flex;
}
head {
width: 100%;
position: fixed;
top: 0;
left: 0;
background: black;
height: 40px;
}
</style>