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

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 >
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
@endforeach

CodePudding user response：

you can also do this with the if function

@php $n=0; @endphp
@foreach($data as $row)
  @php $n  ;
  if($n == '10'){
  $n = '0';
     echo '<tr >';
  }else{
     echo '<tr >';
  }
  @endphp
      <td></td>
      <td></td>
      <td></td>
    </tr>
@endforeach

CodePudding user response：

It looks like your selector is not working. The best thing to do is to create the table using a selector (for example ) 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 >
  <tr >
    <td>1</td>
    <td>2</td>
  </tr>
  <tr >
    <td>1</td>
    <td>2</td>
  </tr>
  <tr >
    <td>1</td>
    <td>2</td>
  </tr>
  <tr >
    <td>1</td>
    <td>2</td>
  </tr>
  <tr >
    <td>1</td>
    <td>2</td>
  </tr>
  <tr >
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr >
    <td>1</td>
    <td>2</td>
  </tr>  
</table>