DOMPDF表格遇页面高度限制时始终移至底部问题排查
2026-5-15
问题分析与解决方案
这个问题主要是DOMPDF的表格分页逻辑和你当前的HTML结构共同导致的，不完全是CSS的锅，但调整CSS/HTML结构可以完美解决。
为什么会出现空白页？
DOMPDF处理表格行（<tr>）时，默认会尝试把整行内容放在同一页里——毕竟表格行通常关联着一组数据，拆分行会影响可读性。但你的结构是把四个长列表塞进同一个<tr>的四个<td>里，只要其中任意一个列表的高度超过单页，整个<tr>的总高度就会远超单页容量。DOMPDF找不到能放下整行的前两页，就会直接把这行推到第三页，前面自然就留空白了。
解决方法（按优先级排序）
1. 用Div布局替代表格（最推荐）
表格的分页限制在DOMPDF里一直是个小痛点，换成浮动的div布局，每个列表独立成列，DOMPDF就能正常处理每个列的分页，不会因为某一列过长影响其他列：
<!DOCTYPE html> <html lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>PDF</title> <style> .column { width: 25%; float: left; box-sizing: border-box; padding: 0 8px; /* 加个内边距让内容不挤在一起 */ } /* 清除浮动，避免影响后续内容 */ .row::after { content: ""; clear: both; display: table; } h4 { margin-top: 0; } ol { padding-left: 18px; } </style> </head> <body> <div class="row"> <div class="column"> <h4>List 1:</h4> <ol> @foreach ($listArray_1 as $inv) <li>{{ $inv->firstname }} {{ $inv->middlename }} {{ $inv->lastname }}</li> @endforeach </ol> </div> <div class="column"> <h4>List 2:</h4> <ol> @foreach ($listArray_2 as $inv) <li>{{ $inv->firstname }} {{ $inv->middlename }} {{ $inv->lastname }}</li> @endforeach </ol> </div> <div class="column"> <h4>List 3:</h4> <ol> @foreach ($listArray_3 as $inv) <li>{{ $inv->firstname }} {{ $inv->middlename }} {{ $inv->lastname }}</li> @endforeach </ol> </div> <div class="column"> <h4>List 4:</h4> <ol> @foreach ($listArray_4 as $inv) <li>{{ $inv->firstname }} {{ $inv->middlename }} {{ $inv->lastname }}</li> @endforeach </ol> </div> </div> </body> </html>
2. 调整表格结构与CSS（如果坚持用表格）
如果必须保留表格，可以把原来的单<tr>拆成四个独立的<tr>，每个<tr>只放一个<td>（跨四列），这样每个列表所在的行可以单独分页：
<table style="width: 100%;"> <tbody> <tr> <td colspan="4"> <h4>List 1:</h4> <ol> @foreach ($listArray_1 as $inv) <li>{{ $inv->firstname }} {{ $inv->middlename }} {{ $inv->lastname }}</li> @endforeach </ol> </td> </tr> <tr> <td colspan="4"> <h4>List 2:</h4> <ol> @foreach ($listArray_2 as $inv) <li>{{ $inv->firstname }} {{ $inv->middlename }} {{ $inv->lastname }}</li> @endforeach </ol> </td> </tr> <!-- List 3、4同理 --> </tbody> </table>
同时给表格添加CSS，允许单元格内分页：
td { vertical-align: top; page-break-inside: auto; } table { table-layout: fixed; width: 100%; }
3. 升级DOMPDF版本
如果你用的是比较旧的DOMPDF版本（比如0.8.x及更早），升级到最新稳定版（比如2.x系列），官方修复了不少分页相关的bug，可能直接解决问题。
总结
本质是DOMPDF对表格整行的分页策略导致的空白页，通过调整布局结构（放弃单行长列表格）是最直接有效的解决方式，毕竟表格本来就不是用来做这种多列长内容布局的最佳选择。
内容的提问来源于stack exchange，提问作者Paul
