How to avoid HTML table background color from spanning across pages on print?

Question

I have a fairly large table in HTML that spans many pages when printed. I have used the following code to ensure table rows do not break across pages when printing and that works fine.

@media print{
  tr {
    page-break-inside: avoid;  
    }
    
  }

However for some reason, the background color of the table continues to span across pages and I cannot seem to figure out why.

Screenshot of table color spanning across page even though table row break happens correctly.

The full CSS and table html is below:

  <style>
    table {
    border-collapse: collapse;
    background-color:#E2EFD9;
    }
    table, td, th {
    border: 1px solid black;
    }

    td{
    padding: 2px;
    }

    @media print{
    table td:last-child {
    display:none
    }
    table th:last-child {
    display:none
    }
    tr {
    page-break-inside: avoid;
    
    }
    }
  </style>

<table>
      <tbody>
        <tr>
          <td style="width: 158px;">
            <p>
              <strong>Photo</strong>
            </p>
          </td>
          <td style="width: 475px;">
            <p>
              <strong>Description</strong>
            </p>
          </td>
          <td style="width: 52px;">
            <p>
              <strong>Select</strong>
            </p>
          </td>
        </tr>
        <tr>
        
        etc.....

I should mention that in old versions of firefox, this color span problem does not happen however firefox has its own world of problems such as only printing the first page and ignoring the rest for some unknown reason. Been scratching my head for days and I'm sure the fix is simple. Any help appreciated.

Answer 1

Found the answer myself, documenting it here for anyone facing this problem in the future.

Simply color the table by row in the css. ie.

tr{
    background-color:#E2EFD9; //whatever color you want
    }