HTML转PDF模板中24行表格仅显示20行，剩余行隐藏问题求助

我做项目时通过定义变量传入HTML模板生成PDF，现在碰到个问题：rates表格变量明明包含24行数据，但生成后只显示了20行。

我的rates变量代码 #

rates = <table class='service'>
     <thead>
     <tr>
     <td>Number</td>
     <td>Causale</td>
     <td>Total (€)</td>
     </tr>
     </head>
     <tbody>
          <tr>
               <td width='10%'>1°</td>
               <td>144.93 € for .... <br></tr>
          <tr>   
               <td width='10%'>2°</td>
               <td>144.93 € for ... <br</td>
          </tr>
     </tbody>
</table>

（注：上述仅为2行示例，实际包含24行数据）

HTML模板代码 #

<page id="page-1">
<div class="body-page">
        <div class="main-container">

            <div class="table-box payment-table">
<div class="table-box payment-table">
                    <div class="table-title">Rates</div>
                    {{rates}}
                    </div>
</div>
</page>

配套CSS样式 #

.service {
 margin-top: 10px;
 margin-bottom: 10px;
}
.body-page {
 float: left;
 min-height: 1032px;
}
    
.main-container {
 position: relative;
 float: left;
 height: 1032px;
 margin-top: -50px;
}

.page{
    float: left;
    width: 210mm !important;
/*  height: 303mm;*/
    height: 296mm !important;
    position: relative;
    padding: 5mm;
    overflow: hidden;
}

补充发现 #

我找到了被隐藏的行——这些行因超出容器范围被截断了。

1. 移除容器溢出隐藏设置：.page元素设置了overflow: hidden，超出容器高度的内容会被直接裁剪。将该属性改为overflow: visible或直接删除，让内容可以自然溢出到下一页。
2. 取消容器固定高度限制：.main-container使用了固定height: 1032px，表格内容高度超过该值就会被截断。将固定高度改为min-height: 1032px，或直接移除高度属性，让容器随内容自动调整高度。
3. 添加PDF分页适配规则：如果使用wkhtmltopdf这类工具生成PDF，添加CSS分页规则避免表格行被截断：

   @media print {
       .service tbody tr { page-break-inside: avoid; }
       .main-container { page-break-after: auto; }
   }
   

   这样内容超出时会自动分页，不会拆分表格行。
4. 修复HTML语法错误：检查rates变量中的HTML代码，存在标签未闭合问题（如第二个<td>内的<br未完成闭合、第一个<tr>未正确闭合），先修复这些语法错误，避免渲染异常。

内容的提问来源于stack exchange，提问作者Jack23