使用dompdf生成PDF时表格分页后首行左侧出现空白如何解决

前置说明 #

page-break-inside: avoid仅在元素总高度未超过单页可渲染区域时生效，若表格本身长度超过单页，会被dompdf强制拆分，该属性无法阻止拆分也不会修复偏移问题。 #

可行修复方案 #

• 统一盒模型解析规则，避免dompdf计算偏差
  给所有表格相关元素添加以下基础样式：

table {
  border-collapse: collapse;
  table-layout: fixed; /* 固定列布局，关闭自动列宽计算 */
  page-break-inside: auto;
  width: 100%; /* 显式设置表格宽度，不要用auto */
}
tr {
  page-break-inside: avoid;
  page-break-after: auto;
  margin: 0 !important;
  padding: 0 !important;
  /* 强制修正偏移，针对跨页首行的左侧空白 */
  position: relative !important;
  left: 0 !important;
}
td, th {
  box-sizing: border-box;
  /* 所有边距、边框设置在td/th上，不要给tr设置 */
  padding: 8px;
  border: 1px solid #eee; /* 替换为实际业务的边框样式 */
}
thead {
  display: table-header-group;
}
tfoot {
  display: table-footer-group;
}

• 移除表格内的异常元素配置
  1. 不要在<tr>标签上直接设置边框、内边距、外边距样式，所有样式下沉到<td>/<th>标签
  2. 不要在表格内部使用浮动元素、负margin元素，嵌套的块级元素统一放在td内部，显式设置宽度
  3. 给每一列显式设置固定宽度，避免dompdf自动计算列宽时出现偏移
• 极端场景适配
  如果表格过长必须跨多页且以上样式仍未解决，可手动将长表格按每页可容纳的行数拆分为多个独立小表格，每个小表格单独设置边距样式，避免跨页拆分。

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