Chrome打印时两个HTML表格分页显示的问题求助

针对Linux下Chrome 108版本中两个表格打印自动分页的问题，即便添加page-break-after: avoid仍无效，可尝试以下几种方案：

• 组合使用新旧分页控制属性：
  Chrome对现代CSS分页属性支持更友好，给表格或其容器添加组合样式，覆盖旧属性的局限性：

  @media print {
    .table-group, table {
      page-break-inside: avoid;
      page-break-before: avoid;
      page-break-after: avoid;
      break-inside: avoid;
      break-after: avoid;
      break-before: avoid;
    }
  }
  

• 排查并调整表格布局属性：

  • 检查表格或父元素是否设置了固定height，改为min-height避免强制占用过多空间；
  • 在打印样式中重置表格的内外边距，防止隐性空间导致分页：

    @media print {
      table {
        margin: 0 !important;
        padding: 0 !important;
      }
    }
    

• 修改Chrome打印缩放设置：
  打开打印预览窗口，进入「更多设置」，将「缩放」从「调整到页面大小」改为「无」或自定义合适比例，浏览器强制缩放可能会触发不必要的分页。

• 隔离其他元素的分页干扰：
  检查表格前后的元素是否设置了page-break-after: always或break-after: page，若存在则在打印样式中覆盖：

  @media print {
    .element-before-tables {
      page-break-after: avoid !important;
      break-after: avoid !important;
    }
  }
  

• 用容器包裹两个表格强制不分页：
  将两个表格放入同一个容器，给容器设置不可分割样式，确保浏览器将其视为一个整体：

  <div class="no-break-wrap">
    <table>...</table>
    <table>...</table>
  </div>
  

  @media print {
    .no-break-wrap {
      page-break-inside: avoid;
      break-inside: avoid;
      display: block;
      width: 100%;
    }
  }
  

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