如何移除HTML表格打印时部分页面底部出现的异常多余线条

问题根源 #

你遇到的页底多余线条，是浏览器分页时表格单元格的底部边框刚好落在@page设置的底部页边距裁剪线上，仅显示了半截边框导致的。你设置的18mm页边距是打印内容的硬裁剪边界，当表格行高刚好让边框位置和裁剪线重叠时，就会出现这种残留线条。

可行解决方案 #

方案1：不修改原有@page配置，添加分页防截断规则

在CSS中新增打印媒体查询的控制规则，避免行/边框被从中间截断：

@media print {
  /* 禁止表格行、单元格被分页截断 */
  table.work-report-table tr,
  table.work-report-table td,
  table.work-report-table th {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* 避免表头被单独留在页面尾部 */
  table.work-report-table thead {
    display: table-header-group;
    break-after: avoid;
  }
  /* 给表格底部增加安全距离，避免底部边框直接卡到页边裁剪线 */
  table.work-report-table {
    margin-bottom: 5mm;
    border-collapse: collapse; /* 合并边框，避免重复渲染产生异常线条 */
  }
}

大部分场景下这个方案就能解决问题，不需要调整你已有的页边距配置。

方案2：替换@page边距为内容内边距（兼容性更好）

如果方案1没有完全解决问题，就将页边距从@page转移到内容容器上，从根源上避免浏览器硬裁剪边框：

1. 给所有需要打印的内容外层套一个容器：

<div class="print-container">
  <!-- 原有报表、表格等所有打印内容都放在这个容器内 -->
  <table class='work-report-table mb-3 mx-auto'>
    <!-- 原有表格内容 -->
  </table>
</div>

2. 调整CSS配置：

/* 取消@page的边距设置，避免硬裁剪 */
@page {
  margin: 0;
}

@media print {
  /* 用容器内边距实现你需要的页面留白效果 */
  .print-container {
    padding: 18mm; /* 上下边距和你原有设置一致，左右可按需调整 */
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
  }
  /* 保留分页防截断规则 */
  table.work-report-table tr,
  table.work-report-table td,
  table.work-report-table th {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  table.work-report-table thead {
    display: table-header-group;
    break-after: avoid;
  }
  table.work-report-table {
    border-collapse: collapse;
  }
}

内容的提问来源于stack exchange，提问作者Chayanin