Hi im having a problem where my table will overlap with my footer as shown
and here is the code for the pdf file in html and the ${allId} is a variable to call the data
const html = `
<html>
<table class="demo">
<thead>
<tr>
<th>Lamp Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>${allId}</td> //Repeated until 40 times
</tr>
</tbody>
</table>
<div class="footer">
<p
style="font-size: 15px;
text-align: left;"
>Page counter
</p>
<p
style="font-size: 15px;
font-weight: bold;"
>Copyright
</p>
</html>
<style>
@page {
size: landscape;
}
.demo {
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
width:100%;
table-layout: fixed;
}
.demo tbody {
max-height:350px;
}
.demo th {
border:1px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
.demo td {
border:1px solid #C0C0C0;
padding:5px;
max-height:350px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
color: black;
text-align: center;
flex-direction:column;
margin-top: 25px;
}
</style>
`;
can someone point out what is the problem in my styling is? I want the table to appear until it reach the footer and continue to do so for the next pages