通过css强制bootstrap 4表格在打印页面时完整分页，核心做法是设置 table 的 page-break-inside: avoid; 属性，并配合 thead 和 tbody 的分页控制。这样做可以防止表格行被截断到下一页，同时确保表头在每页顶部重复出现。

如何防止表格行被分页截断

将 page-break-inside: avoid; 应用于 tr 元素即可实现。这告诉浏览器不要在任何一行中间进行分页，如果空间不足，整行会移动到下一页。

@media print {
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
}

如何让表头在每页重复显示

利用 display: table-header-group; 作用于 thead 元素，浏览器会在每一页的顶部自动渲染表头内容。这是HTML表格模型的原生特性，无需JavaScript介入。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

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

当表格高度超过一页时如何处理

如果表格总高度超过单页，上述CSS会自动将超出的部分分页，并保持表头重复。对于极长表格，建议结合 max-height 或滚动容器在屏幕端预览，但打印时仍遵循分页逻辑。若需更精细控制，可手动插入

强制分页。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！