CSS打印分页时如何实现标题与对应表格同页不分离

现有分页规则仅作用于表格内部元素，<h2>标题和后续关联<table>是相互独立的同级节点，浏览器打印分页计算时不会自动将二者绑定为整体；另外原代码的表格结构存在语法问题：<tbody>直接包裹<td>、缺少行标签<tr>，会干扰浏览器对表格渲染尺寸的计算，最终出现标题单独留在页尾、表格被拆分到下一页的偶发异常。

结构调整 #

• 给每个标题和其对应的表格套一层独立的块级容器，将二者归为同一个逻辑整体，方便分页规则统一生效
• 补全表格缺失的<tr>标签，修正不规范的DOM结构，避免浏览器怪异渲染干扰分页逻辑

打印样式配置 #

使用同时兼容新旧浏览器规范的分页属性，注意所有分页规则必须放在@media print媒体查询内，避免影响屏幕端的页面展示：

@media print {
  /* 标题+表格整体容器的分页规则 */
  .table-group {
    /* 兼容IE、旧版Chrome/Safari */
    page-break-inside: avoid;
    page-break-before: auto;
    /* 兼容现代Chrome/Edge/Firefox */
    break-inside: avoid;
    break-before: auto;
  }

  h2 {
    /* 禁止标题后直接分页，保证标题紧贴后续内容 */
    page-break-after: avoid;
    break-after: avoid;
  }

  table {
    page-break-inside: auto;
    border-collapse: collapse;
    width: 100%;
  }

  tr {
    /* 单行内容不跨页拆分 */
    page-break-inside: avoid;
    page-break-after: auto;
  }

  thead {
    /* 跨页时自动在每页顶部重复表头 */
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }
}

调整后的HTML结构参考：

<div class="table-group">
  <h2>Title</h2>
  <table>
    <thead>
      <tr>
        <th>Test</th>
        <th>Test 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test</td>
        <td>Test 2</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-group">
  <h2>Another one</h2>
  <table>
    <thead>
      <tr>
        <th>Test</th>
        <th>Test 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test</td>
        <td>Test 2</td>
      </tr>
    </tbody>
  </table>
</div>

避坑说明 #

• 不要给.table-group容器、table元素设置float、position: absolute/fixed属性，这类属性会直接导致浏览器分页规则失效
• 长表格不要给table标签加page-break-inside: avoid规则，否则单页放不下整个表格时，会出现表格整体被挤到下一页、上一页留大量空白的问题，保留page-break-inside: auto即可，规则只限制单行、标题+表格头部不拆分
• 如果项目中使用了第三方UI组件库，需要检查组件样式有没有把thead、tr的display属性修改为block/flex这类非表格原生值，这类修改会导致表头跨页重复失效，同时干扰分页尺寸计算
• 测试时优先使用浏览器默认的打印边距参数，自定义过小的页边距会触发部分浏览器的怪异分页逻辑

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