如何在HTML报表表格中添加水平线解决跨页未闭合问题

你之前加的page-break-after: always只是强制分页，没法自动给跨页的表格补全边框，试试下面这几个实用方案：

方案1：用box-decoration-break保持边框连续性 #

这是最简单的方法，让表格边框在分页断点处自动复制：

@media print {
  table {
    border-collapse: collapse;
    /* 兼容不同浏览器 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  th, td {
    border: 1px solid #000;
  }
}

这个属性会把表格的边框装饰在分页时“克隆”到每一页，第一页底部和第二页顶部都会显示完整边框，看起来表格是闭合的。

方案2：伪元素+行样式兜底（兼容旧浏览器） #

如果上面的方法在某些浏览器不生效，用这个纯CSS方案：

@media print {
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #000;
    border-bottom: none;
  }
  /* 给除最后一行外的所有行加底部边框 */
  tr:not(:last-child) td {
    border-bottom: 1px solid #000;
  }
  /* 避免单一行被拆分到两页 */
  tr {
    page-break-inside: avoid;
  }
  /* 给表格加虚拟底部行，确保第一页末尾有边框 */
  table::after {
    content: "";
    display: table-row;
    height: 0;
    border-bottom: 1px solid #000;
  }
}

可选：重复表头增强可读性 #

如果表格有表头，建议加上这个样式，让第二页也显示表头，同时保持边框连贯：

@media print {
  thead {
    display: table-header-group;
  }
}

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