php - HTML/CSS - 表格分页符不起作用(打印)

Question

我在一个表格元素上尝试了很多不同的分页规则，但我已经筋疲力尽了。

元素地点: https://github.com/xremainnameless/lead_tracker

我要打印的表格位于“#lead_wrapper_u”div 内的“leads_queue_u.php”。我使用“scripts/fill_all_leads_u.php”动态创建表格，并使用文档上的自定义打印按钮打印表格。

无论我应用了哪些 CSS 规则，我似乎都无法强制分页。我删除了所有尝试，以显示更清晰的代码。这是@print CSS 的片段:

@media print {
   @page {size: landscape;}
   body * {visibility: hidden;}
   #lead_wrapper_u, #lead_wrapper_u * {visibility: visible;}
   #lead_wrapper_u button {visibility: hidden;}
   #lead_wrapper_u {
      position: absolute;
      left: 0;
      Top: 0;
   }
}

Answer 1

我总是建议不要在浏览器中使用打印按钮 (ctrl + p)；因为每个浏览器都有自己的偏好。您可以依赖其他框架将页面打印成不同的格式。例如fpdf 框架。

但是，如果你坚持使用浏览器按钮打印，你可以将所有表格替换为div；由于 div 总是在页面末尾中断，不会扭曲布局。例如，如果您有此代码:

<table>
    <tr>
       <td>Name</td>
    </tr>
    <tr>
       <td>City</td>
    </tr>
    <tr>
       <td>DOB</td>
    </tr>
</table>
 .
 .
 .

然后，您必须删除表格元素，并用 div 替换，如下所示:

    <div style = "border:black solid;">
         <div style = "border:solid black;">Name</div>
         <div style = "border:solid black;">City</div>
         <div style = "border:solid black;">DOB</div>
   </div>
   .
   .
   .

这将确保每个 div 都将跳转到下一页，而不会看起来像是被剪切了。