CSS selector for first child after page break

Question

How can I create a first-child style AFTER a page break has occurred?

The final situation that I encounter is that I would like to style the first row of the table in different ways, and when printing the table - several pages. I have successfully used: first-child to create the first line. I have also successfully avoided page breaks within lines. However, I cannot figure out how to style the first row on the second page of the table.

I am familiar with the css pseudo class pseudo-class ( http://www.w3schools.com/cssref/sel_firstchild.asp ) and I am also familiar with the css printing property page-break-inside ( http://www.w3schools.com /cssref/pr_print_pagebi.asp ). Can't I get them to play beautifully together?

EDIT: Adding Code Sample

HTML: <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> CSS: table tr:first-child td { border-top: solid red 2px; } table tr { page-break-inside: avoid } 

Answer 1

Okey, the direct answer is that you cannot do it however you want.

Edit: oh, it seems I am responsible for a more complex question, for example, “how to add a table title to each printed page”, but in any case, the solution is the same. I hope everything is in order.

But there are a few tricks to do what you want.

1) Break the table in several parts, add a part to each of them and delete the field so that it will look like one table. Add in css something like:

 table { page-break-inside: avoid; page-break-after: auto; } table + table thead { display: none; } 

Also do not forget to set the width td, lead tables without hell can have different widths.

After that add print styles:

 @media print { table + table thead { display: table-column-group; } } 

Yes, you have the opportunity to duplicate the headings on the page, but it is still better than nothing. And if you find a large number of lines for your project, it will look the way you need it.

2) Prepare, for example, a special loaded version of the page with WKHTMLTOPDF . This way you can catch page breaks well and add what you need. This option provides maximum output flexibility, but it will take some time for support.

3) Calculate everything with JS. Print your page and analyze it - add some constants to js (height per page), and when someone tries to print - count the page breaks, find the nearest element and add what you need.

I hope you got an answer. Have a nice day.

Answer 2

I also looked for a way to apply styles only to the first and last rows of a table during page breaks, but maybe for a different use case.

I needed to give the whole table a table, but not along the rows of the table, only outside. A simple way is to add a border to the table, but when a page break occurs, the borders do not redraw at break.

My solution was to use thead and tfoot , as these elements are repeated at each break. This gave me a full border around a table that obeyed a page break.

You can change this method for your circumstances. Let's say if you want to change the styles of only the first line (and so that it is consistent in the page break), you just put this line in thead or tfoot depending on whether you want the first or last line. You can even do this with the existing thead . Just give everyone thead tr a class so you know what the main heading is and which is a stylized line.

There were a few warnings. There should have been something inside td in the footer of the table, otherwise it would not be displayed. I added a   (which means "no break") to the first td , and then set the font-size on td to 1px (Otherwise there will be a noticeable space at the bottom of your table). Font size should be applied directly to td . Font size 0 will not work either. It must be nonzero.

Example

This example is for my use case, but you can change it. You can also use as many columns as you want. I used it for simplicity. Ted and tfoot must have the same number of columns.

 .my-table tr {border-left: 1px; border-right: 1px;} .my-table thead {border-top: 1px;} .my-table tfoot {border-bottom: 1px;} // must be applied to the td!!! .my-table tfoot td {font-size: 1px;} <table class="my-table"> <thead><td></td></thead> <tbody> <tr><td>data</td></tr> <tr><td>data</td></tr> </tbody> <tfoot><td>&nbsp;</td></tfoot> </table>