HTML表格打印分页问题：如何让每个表格单独占一页？

我懂你现在的困扰——明明给表格加了page-break-after的打印样式，结果每个表格还是挤在同一页，完全没达到每个表格单独占一页的效果。咱们从几个常见的坑入手解决：

1. 先修正CSS语法错误 #

看你贴的CSS代码，@media print的闭合括号位置不对，这会导致整个打印样式直接失效！先把语法改对：

@media print {
  table {
    page-break-after: always; /* 每个表格后强制分页 */
  }
  /* 可选：给最后一个表格取消分页，避免多出来一页空白 */
  table:last-child {
    page-break-after: avoid;
  }
}

2. 解决Bootstrap布局的干扰 #

你给表格加了col-md-12类，这个类默认带float: left属性，而浮动元素会直接干扰page-break的生效逻辑。咱们在打印样式里重置这个类的属性：

@media print {
  /* 重置Bootstrap列的浮动，确保表格是标准块级元素 */
  .col-md-12 {
    float: none !important;
    display: block !important;
    width: 100% !important;
  }

  table {
    page-break-after: always;
    page-break-inside: avoid; /* 额外设置：避免表格内部被分页截断 */
  }

  table:last-child {
    page-break-after: avoid;
  }

  /* 再重置父容器的overflow，防止内容被意外截断 */
  .container, .row {
    overflow: visible !important;
  }
}

3. 确保打印触发方式正确 #

如果是用原生JS触发打印，直接调用window.print()就可以，确保按钮的点击事件逻辑没问题：

// 给打印按钮绑定点击事件
$('#print-button').click(function() {
  window.print();
});

要是你用的是jQuery打印插件（比如jQuery.print.js），记得开启打印样式的支持：

$('#print-button').click(function() {
  $('body').print({
    mediaPrint: true, // 强制启用打印媒体查询的样式
    noPrintSelector: '.no-print' // 可选：标记不需要打印的元素
  });
});

最后检查浏览器兼容 #

有些老浏览器对page-break的支持有限，比如要确保表格不是绝对定位，父元素没有设置page-break-inside: avoid。现在主流浏览器（Chrome、Firefox、Edge）都能很好支持这些属性，只要样式正确就没问题。

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