Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
611 views
in Technique[技术] by (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Inside <head>, set this style in your CSS stylesheet

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...