如何应用CSS分页符来打印具有很多行的表？

2021年4月29日18:32:49 发表评论 962 次浏览

当打印具有很多行的表时, 在页面结束时将数据保持在一起可能会出现问题。由于连续显示的数据更有意义。在这里, 我们将跟踪遇到分页符情况时可以打印多行表的内容的方式。

可以用于此目的的最逻辑的属性是分页符在CSS中。

CSS中的分页符

CSS属性可帮助定义页面上的元素在打印时的外观。这使文档的打印更像书本。

分页符不是直接可用的属性, 但包含可根据要求使用的三个属性：

分页前：在元素之前添加分页符
分页后：在元素后添加分页符
页内闯入：设置是否应在元素内避免分页符。

语法如下：

name_of_the_element { name_of_the_property: value;}

例子：

table {page-break-before: always;}

这里,

元素名称

指的是元素分页符是必需的。 (例如表格)

属性名称

是指应用于元素所需的属性。 (例如, 分页之前)

值指示在打印文档时给定属性应如何表现。 (例如, 始终)

它可以在表中, 表之前或之后, 行之前或之后, 甚至行中的任何位置应用。但是应该应用它们, 以便格式化输出在硬拷贝中有意义。

以下程序将帮助你更好地理解。仅当打印了pdf后才可以看到它们的输出。

程序1：表格启动时需要新页面的程序

<!DOCTYPE html>
<html>
<head>
     <title></title>
     <style type = "text/css">
         table {page-break-before: always;}
     </style>
</head>
<body>
     hello from the lsbin
     <table>
         <tr>
             <th>s.no.</th>
             <th>name</th>
         </tr>
         <tr>
             <td> 1 </td>
             <td> apple </td>
         </tr>
         <tr>
             <td> 2 </td>
             <td> mango </td>
         </tr>
     </table>
</body>
</html>

输出如下：

第1页：

第2页：

程序2：当表启动时并且在打印行时需要新页但不在行之间时需要新页的程序。

<!DOCTYPE html>
<html>
<head>
     <title></title>
     <style type = "text/css">
         table {page-break-before: always; 
                font-size: 100px;}
         tr{page-break-inside: avoid; 
            page-break-after: auto;}
     </style>
</head>
<body>
     hello from the lsbin
     <table>
         <tr>
             <th>s.no.</th>
             <th>name</th>
         </tr>
         <tr>
             <td> 1 </td>
             <td> apple </td>
         </tr>
         <tr>
             <td> 2 </td>
             <td> mango </td>
         </tr>
         <tr>
             <td> 3 </td>
             <td> kiwi </td>
         </tr>
         <tr>
             <td> 4 </td>
             <td> banana </td>
         </tr>  
         <tr>
             <td> 5 </td>
             <td> strawberry </td>
         </tr> 
         <tr>
             <td> 6 </td>
             <td> guava </td>
         </tr> 
         <tr>
             <td> 7 </td>
             <td> watermelon </td>
         </tr>    
     </table>
</body>
</html>

输出如下：

第1页：