如何仅在行与页脚重叠的情况下，在打印预览中隐藏HTML表行列的边框？

Question

我有以下场景:第一列可能跨越多行的报告--可能是200行。页脚将显示在打印预览的每一页上。

我需要隐藏页脚中重叠的第一列的边框。

以下内容适用于没有重叠的报表的最后一页。

​

@media print {

.myReport tfoot>tr>td {
  border: none !important;
}

.myReport tfoot {
  border: 1px solid #ddd !important;
}
}

<table>
  <tbody>
    <tr>
      <td rowspan="200">Group Header</td>
        <td>BBB</td>
        <td>BBB</td>
    </tr>

    <tr>
      <!-- 199 more times -->
      <td>BBB</td>
      <td>CCC</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="table-footer">
      <td colspan="3">AAAAA AAAAAAA AAAAAAA AAAAA AAAAAAA AAAAAAA</td>
    </tr>
  </tfoot>
</table>

​

如何在打印预览中隐藏HTML表行列的边框，仅在其与页脚重叠的情况下？

​

​

通过查看1-10的行来自多行列，而不是页脚。

Answer 1

解决方案是提高页脚中的堆栈顺序。

@media print {
    tfoot > tr > td.multiColumn {
        position: relative;
        z-index: 1;
    }
}

<table>
  <tbody>
    <tr>
      <td rowspan="200">Group Header</td>
        <td>BBB</td>
        <td>BBB</td>
    </tr>

    <tr>
      <!-- 199 more times -->
      <td>BBB</td>
      <td>CCC</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="table-footer">
      <td class="multiColumn" colspan="3">AAAAA AAAAAAA AAAAAAA AAAAA AAAAAAA AAAAAAA</td>
    </tr>
  </tfoot>
</table>