使用domPDF时HTML+CSS表格布局异常问题求助

问题分析 #

你的代码存在几个导致布局异常的问题：

1. 字体大小未指定单位（如font-size:14），domPDF对无单位的字体解析存在偏差
2. 多个独立<table>标签默认存在间距，导致行/表之间空隙不符合预期
3. 第一组表格的列宽设置逻辑混乱（tabela-up-right设为width:100%但父table未指定宽度）
4. 未启用表格边框合并，导致重复边框视觉上不协调

修改后的代码 #

<style>
    body{
        font-family: Verdana;
        margin: 0; /* 去除页面默认边距 */
        padding: 0;
    }

    #titulo{
        color: #FFFFFF;
        background-color: #5481eb;
        font-size: 14px; /* 添加px单位 */
        font-weight: bold;
        text-align: center;
        border:2px solid #000;
        padding: 8px 0; /* 增加内边距让标题更美观 */
    }

    /* 统一表格基础样式 */
    table{
        width: 100%; /* 表格占满宽度 */
        border-collapse: collapse; /* 合并边框，避免重复线条 */
        margin: 0; /* 去除表格默认间距 */
    }

    .tabela-up-left{
        color: #FFFFFF;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
        background-color: #707070;
        border:2px solid #000;
        width: 20%; /* 固定左侧列宽度比例 */
        padding: 6px; /* 增加内边距控制行高 */
    }

    .tabela-up-right{
        color: #FFFFFF;
        font-weight: bold;
        background-color: #c4c0c0;
        text-align: left;
        font-size: 10px;
        border:2px solid #000;
        width: 80%; /* 右侧列占剩余宽度 */
        padding: 6px;
    }

    .tabela-down{
        color: #FFFFFF;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
        background-color: #707070;
        border: 2px solid #000;
        width: 33.33%; /* 三列均分宽度 */
        padding: 6px;
    }

    .tabela-description{
        font-size: 12px;
        text-align: center;
        border: 2px solid #000;
        width: 33.33%;
        padding: 6px;
    }
</style>
<div id="titulo">
    <h1>LISTAGEM DE PENDÊNCIAS</h1>
</div>
<!-- 合并第一组信息到一个表格 -->
<table>
    <tr>
        <td class="tabela-up-left">PROTOCOLO:</td>
        <td class="tabela-up-right">123</td>
    </tr>
    <tr>
        <td class="tabela-up-left">CÓDIGO DO LOTE:</td>
        <td class="tabela-up-right">7773</td>
    </tr>
</table>
<!-- 合并表头和内容到一个表格，避免间距问题 -->
<table>
    <tr>
        <td class="tabela-down">VÍNCULO</td>
        <td class="tabela-down">PÊNDENCIA</td>
        <td class="tabela-down">STATUS</td>
    </tr>
    <tr>
        <td class="tabela-description">Dados gerais</td>
        <td class="tabela-description">Instrumento de Titulação</td>
        <td class="tabela-description">Nenhum</td>
    </tr>
</table>

关键修改点说明 #

• 给所有font-size添加px单位：domPDF对无单位的字体属性解析不稳定，明确单位后布局更可控
• 为表格添加border-collapse: collapse：合并单元格边框，解决重复边框问题，同时让表格整体更紧凑
• 设置表格width:100%并分配列宽比例：保证表格占满页面宽度，列宽分配合理，避免布局错位
• 给单元格添加padding：控制行内的间距，替代默认行高，让内容更舒展
• 合并相关表格：将表头和内容放在同一个<table>里，避免独立表格之间的默认间距，解决行/表间隙问题
• 去除页面默认margin和padding：避免domPDF生成的PDF出现不必要的边距

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