Displaying large data and properly breaking to a new page using dompdf laravel

Question

So i'm working on a project (laravel 5.6) and i have to export students results to pdf (dompdf). I display the result of 29 students on a page after which i want to break to a new page. I have successfully achieved this using the code below:

<div>
  <table border="1" style="width: 100%; border-collapse: collapse; border: 1px; height: 2em; font-size: 0.9em;">
    <thead style="text-align: center;">
      <tr>
         <th>S/N</th>
         <th>MATRIC NO</th>
         <th>STUDENT NAME</th>
         <th>EXAM</th>
         <th>CA</th>
         <th>TOTAL</th>
         <th>GRADE</th>
      </tr>
   </thead>
   <tbody>
        <?php $sn = 1 ?>
        <?php $n = 1 ?>
        @foreach($results as $result)
          <tr style="text-align: center;">
            <td>{{ $sn }}.</td>
            <td width="20%">{{ $result->matric_no }}</td>
            <td width="25%">{{ $result->last_name }} {{ $result->first_name }} {{ $result->middle_name }}</td>
            <td width="8%">{{ $result->score }}</td>
            <td width="10%">{{ $result->ca }}</td>
            <td>{{ ($result->score + $result->ca) }}</td>
            <td>{{ calculateGrade($result->score + $result->ca) }}</td>
          </tr>

          <?php $sn++ ?>
          @if($n % 29 == 0)
             <div style="page-break-before: always;"></div>
          @endif

          <?php $n++ ?>
       @endforeach
   </tbody>
  </table>
</div>

My problem is this: The border on the right hand side isn't displaying properly as seen here and when it breaks to a new page, the first row isn't displayed properly. What am i doing wrong?

This is my CSS:

<style>
        #background{
            position:absolute;
            z-index:0;
            background:white;
            display:block;
            min-height:50%;
            min-width:50%;
            color:yellow;
        }

        #content{
            position:absolute;
            z-index:1;
        }

        .page-break {
            page-break-after: always;
        }

        #bg-text {
            color:lightgrey;
            font-size:120px;
            transform:rotate(300deg);
            -webkit-transform:rotate(300deg);
             z-index:  -20000;
        }
        .pagenum:before {
            content: counter(page);
        }

        .footer {
            width: 100%;
            text-align: center;
            position: fixed;
            bottom: 0px;
        }

        table thead tr td{
            page-break-inside: avoid !important;
        }
    </style>

Thanks in advance for your help.