CSS: Apply Page Break after every n row when printing?

Question

How would one add a page-break after every n rows? So that when users print there are only 10 rows per page.

This is what I've tried so far but the page-break is not working.

<style>
@media print
    {
    .icebreaker
    {
        
    }

    .icebreaker:nth-child(10n) 
    {
    
        page-break-after: always;
    }
    }
</style>

@foreach($data as row)
<tr class="icebreaker">
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
@endforeach

@HassaanAli OP certainly doesn't want every 10th *column* on another page, but every 10th *row*. — Peter Krebs, May 05 '22 at 12:24
Wouldn't you write `9n` anyway, since the child number is 0-based..? I forgot. Does this work with other elements other than `tr`? — Peter Krebs, May 05 '22 at 12:27
Does this answer your question? [Page break before table row](https://stackoverflow.com/questions/45046834/page-break-before-table-row) (but see also [How to apply CSS page-break to print a table with lots of rows?](https://stackoverflow.com/questions/8712677/how-to-apply-css-page-break-to-print-a-table-with-lots-of-rows)). — collapsar, May 05 '22 at 12:44

score 0 · Answer 1 · answered May 05 '22 at 12:50

It looks like your selector is not working. The best thing to do is to create the table using a selector (for example class="ice") and then you can apply the pseudo class. In my example I took every second row.

.ice tr:nth-child(2n) 
{
  color: red;
  page-break-after: always;
}

<table class="ice">
  <tr class="icebreaker">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="icebreaker">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="icebreaker">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="icebreaker">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="icebreaker">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="icebreaker">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="icebreaker">
    <td>1</td>
    <td>2</td>
  </tr>  
</table>

CSS: Apply Page Break after every n row when printing?

1 Answers1