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都会突破到下一页，而不会被视为已被剪切。

HTML / CSS - 表格中断不起作用（打印）

1 个答案: