如何避免跨越打印页面的HTML表背景颜色？

Question

我有一个相当大的HTML表格，可以在打印时覆盖许多页面。我已经使用以下代码来确保表格行在打印时不会打破页面并且工作正常。

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

然而由于某种原因，表格的背景颜色继续跨越页面，我似乎无法弄清楚原因。

表格颜色跨越页面的屏幕截图，即使表格行中断正确。

完整的CSS和表格html如下：

  <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.....

我应该提一下，在旧版本的firefox中，这个颜色跨度问题不会发生，但firefox有自己的问题世界，例如只打印第一页而忽略其余的原因。 多年来我一直在挠头，我确信修复很简单。任何帮助表示赞赏。

Answer 1

我自己找到了答案，并在此处记录了将来遇到此问题的任何人。

只需在css中逐行着色。即

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