将“page-break-before”应用于表行 (tr)

根据 W3.org,样式page-break-after适用于块级元素(http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)

根据 W3.org,样式page-break-after适用于块级元素(http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props

<tr>是块级元素(根据此:http://www.htmlhelp.com/reference/html40/block.html,它是)

我正在这样做,但分页符在打印时不会创建实际的分页符:

  <table>
    <tr><td>blah</td></tr>
    <tr><td>blah</td></tr>
    <tr style="page-break-after: always"><td>blah</td></tr>
    <tr><td>blah</td></tr>
  </table>

我这样做是正确的方法吗?

如果<tr>不是块级元素:我怎么想实现这个分页符?

注意:之前的代码只是一个例子,但我想要做的是把一个分页符每 5 行的表,所以如果你知道这种情况下的任何提示,将不胜感激

14

<head>中,在 CSS 样式表中设置此样式

<head>
    <style>
        @media print {
            tr.page-break  { display: block; page-break-before: always; }
        }   
    </style>
</head>

这样,它将在打印期间在此表行之前产生一个分页符。

<tr class="page-break">
</tr>
2

The site you referenced声明<tr>也可以被视为块级元素,因为它可能包含块级元素。”W3.orgMozilla docs均未声明<tr>是块级元素。

一些可能的解决方案

根据措辞和您的示例,我将确保单元格包含一个真正的块级元素。这里有两个使用<h1><p>的示例,它们是块级文本元素。

<tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>

其他人报告了类似的问题,其中一个解决方案可能对你有用。

How to apply CSS page-break to print a table with lots of rows? Google Chrome Printing Page Breaks Printing a Gridview-how to print n rows on each page using page break page-break-inside doesn't work in Chrome?

My Lister所述,您可以attempt to catch the printing action或生成页面的打印版本,将表格分开,以便您可以在每五行之后获得所需的分页符。

1

使用display:block设置所有<tr>标记,并为表格和单元格定义页面格式和以 mm 为单位的大小。

这里<td>标签宽度设置为 23mm,因为有 10 个 td 标签,每侧有 2mm 填充(23 + 2 + 2)* 10 = 270,即<table>宽度。

您可以调整word-break取决于你想如何打破的话。

@media print {
    @page {
        size:A4 landscape;
        margin: 5mm 5mm 5mm 5mm;
        padding: 0mm 0mm 0mm 0mm;
    }
    .table{
        width:270mm;
        min-width:270mm;
    }
    td, th{
        padding: 2mm 2mm 2mm 2mm !important;
        display: table-cell;
        word-break:break-all;
        width:23mm;
        min-width:23mm;
    }
    tr{
       display:block;
    }
    tr.page-break  { 
       page-break-before: always; 
    }
}  

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(467)
语音到文本翻译器覆盆子 pi
上一篇
VisualStudioALT代码符号
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(69条)