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 的 sn-p：

@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 将中断到下一页，而不会看起来像被剪切了。