In the following example I have 25 rows. The document is divided into 2 pages. The first page contains rows from 1 to 13 while the second page contains pages from 15 to 25. As you can notice row number 14 is hidden. How to solve this issue?
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<style>
#header {
position: running(runningHeader);
background-color: lightgray;
height: 30mm;
margin-top: 25.4mm;
margin-bottom: 2.5mm;
border: 0.25mm solid black;
}
#footer {
position: running(runningFooter);
background-color: lightgray;
height: 20mm;
margin-bottom: 25.4mm;
margin-top: 2.5mm;
border: 0.25mm solid black;
}
.content {
background: orange;
height: 100%;
width: 100%;
}
@media print {
@page {
size: A4;
margin-top: 57.9mm;
margin-bottom: 47.9mm;
margin-left: 25.4mm;
margin-right: 25.4mm;
@top-center {
content: element(runningHeader);
background: yellow;
}
@bottom-center {
content: element(runningFooter);
background: yellow;
}
.currentPageNumber::before{
content: counter(page)
}
.totalNumberOfPages::before{
content: counter(pages)
}
}
}
h3, p {
margin: 0mm;
padding: 0mm;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 0.25mm solid black;
padding: 1mm;
}
</style>
</head>
<body>
<header id="header">
<div style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;">
<div>
<h1>Header goes here</h1>
</div>
</div>
</header>
<footer id="footer">
<div style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;">
<div>
<div>
Page <span class="currentPageNumber"></span> of <span class="totalNumberOfPages"></span>
</div>
</div>
</div>
</footer>
<div class="content">
<h3 style="text-align: center; padding: 1mm; text-decoration: underline;">The Title of the Report</h3>
<div style="text-align: center; padding: 1mm;">
<span style="font-weight: bold; text-decoration: underline;">Date:</span> 2024-09-04
<span style="font-weight: bold; text-decoration: underline;">Time:</span> 14:20:31
</div>
<table>
<thead style="background-color: lightgray;">
<tr>
<th>#</th>
<th>Valid Until</th>
<th>Entry Date</th>
<th>Customer Name</th>
<th>Total</th>
<th>Reference Number</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>11</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>12</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>13</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>14</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>15</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>16</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>17</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>18</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>19</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>21</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>22</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>23</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>24</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
<tr>
<td>25</td>
<td>2024-09-04</td>
<td>2024-09-04 13:15:14</td>
<td>Company</td>
<td>115.00</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>