Applying “page-break-before” to a table row (tr)

According to W3.org, the style page-break-after applies to block level elements (http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)

<tr> is a block level element (according to this: http://www.htmlhelp.com/reference/html40/block.html, it is)

I'm doing this, but the page break is not creating an actual page break when printing:

  <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>

Am I doing this the correct way?

If <tr> wasn't a block level element: how am I suppose to achieve this page break?

Note: the before code is just an example, but what I'm trying to do is to put a page-break every 5 rows of the table, so if you know any tips for that case, will be appreciated

标签： css page-break

2条回答

等我变得足够好

2楼-- · 2019-01-18 23:50

The site you referenced states that <tr> "may also be considered a block-level element since it may contain block-level elements." Neither the W3.org or Mozilla docs state that <tr> is a block-level element.

Some Possible Solutions

Based on the wording and your example, I would ensure that the cell contains a true block-level element. Here are two examples using <h1> and <p> which are block-level text elements.
```
<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>
```
Others have reported similar problems and one of the solutions might work for you.
As mentioned by My Lister, you could attempt to catch the printing action or generate a print version of the page that would separate the table out so you can obtain the desired page break after every five rows.

0人赞添加讨论(0) 举报

我只想做你的唯一

3楼-- · 2019-01-18 23:53

Inside <head>, set this style

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

That way, it will produce a page break during printing right before this table row.

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

0人赞添加讨论(0) 举报

Applying “page-break-before” to a table row (tr)

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间