如何避免 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
    }