Laravel中使用DomPDF调整表格单元格内div的布局问题

从你提供的截图能看到，表格单元格内的下划线div和文本基线错位，导致视觉上和表格边框不对齐，调整padding/margin时还会影响单元格布局，这是inline-block元素的默认特性和表格默认样式共同导致的，以下是具体修复方案：

核心修复方法 #

1. 修正inline-block元素的垂直对齐 #

给div添加vertical-align: bottom;，让它和相邻文本的基线对齐，消除上下偏移：

<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">  
<tr>
    <td colspan="2">
        <b>Email </b>
        <div style="display: inline-block; border-bottom:.7px solid black; height:15px; padding:0; width:200px; overflow:hidden; vertical-align: bottom;">  
                {!! $usermodel->email !!}
            </div>
    </td>
</tr>
</table>

2. 清除表格单元格的默认内边距 #

表格单元格默认带有少量内边距，会让整体布局偏移，给td添加padding: 0;：

<td colspan="2" style="padding: 0;">

3. 用相对单位适配字体大小 #

PDF渲染对固定px的兼容性不如相对单位，把div的高度换成em（和字体大小绑定），避免不同字体下的错位：

<div style="display: inline-block; border-bottom:.7px solid black; height:1.2em; padding:0; width:200px; overflow:hidden; vertical-align: bottom; line-height:1.2em;">  

4. 简化结构（推荐） #

如果只是需要下划线效果，没必要嵌套div，直接用span更简洁，减少渲染问题：

<table border="" style="border-collapse: collapse;font-size:12px;text-align: left;">  
<tr>
    <td colspan="2" style="padding: 0;">
        <b>Email </b>
        <span style="border-bottom:.7px solid black; display: inline-block; width:200px; line-height:1.2em;">
                {!! $usermodel->email !!}
            </span>
    </td>
</tr>
</table>

PDF渲染注意事项 #

不同的PDF生成工具（如dompdf、wkhtmltopdf）对CSS的支持略有差异，测试时尽量：

• 避免使用过于复杂的嵌套元素
• 优先用相对单位（em/rem）替代固定px
• 减少使用float等容易引发渲染异常的属性

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