使用Paged.js为打印表格添加页码时遭遇内容溢出问题

基础样式调整，避免内容溢出 #

• 给表格设置自适应布局，同时防止单行被跨页截断：

  table {
    width: 100%;
    border-collapse: collapse;
  }
  tr {
    page-break-inside: avoid; /* 禁止单个表格行被拆分到两页 */
  }
  th, td {
    padding: 0.5em;
    word-wrap: break-word; /* 长文本自动换行，避免横向溢出页面 */
    width: auto; /* 也可根据需求设置固定百分比宽度，比如width: 25%; */
  }
  

明确配置页面边距 #

通过CSS的@page规则定义打印页面的尺寸与边距，确保表格内容在指定范围内：

@page {
  size: A4; /* 可替换为其他纸张尺寸 */
  margin: 2cm; /* 根据需求调整上下左右边距 */
}

优化表格分组的分页兼容性 #

• 让表头在每页重复显示，同时确保tbody能被正确拆分：

  thead {
    display: table-header-group; /* 每页顶部重复显示表头 */
  }
  tbody {
    display: table-row-group;
    page-break-after: auto; /* 允许tbody在合适位置分页 */
  }
  

调试注意事项 #

• 用浏览器打印预览（Paged.js的预览模式）实时检查分页效果，定位溢出的行或单元格
• 不要给表格、行设置固定高度，让内容自然流动，避免干扰Paged.js的分页计算
• 尽量减少复杂的单元格合并（colspan/rowspan），如果必须使用，单独给合并单元格添加page-break-inside: avoid规则

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