在 Laravel 中使用 DomPDF 调整表格单元格内的 div

Question

我正在我的项目中添加一个功能，其中用户可以将他们的数据转换为 pdf，但我遇到了 css 的问题。我如何调整此 div 以便它与我的表格的边框对齐？ 填充和边距不起作用，因为表格单元格也会调整。 或者我添加了错误的像素？ 我显示了表格边框，以便您可以看到 div 的边框有多远。 这是代码

<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:0px;width:200px;overflow:hidden;">  
                {!! $usermodel->email !!}
            </div>
    </td>
</tr>
</table>

Answer 1

如果想让div对齐表格的边框，可以给td元素添加一个vertical-align属性，值为top。 这将使 div 的顶部与表格单元格的顶部对齐。

您还可以尝试将 td 元素的高度设置为 div 的高度加上您要添加的任何额外填充。 这将确保整个 div 包含在表格单元格中。

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

Answer 2

由于您正在使用运行 styles，在这种情况下，我建议（也许可以更好）：-

 <table border="" style="border-collapse: collapse;font-size:12px;text-align: left;"> <tr> <td colspan="2"; style="font-size:18px; padding: 2px" > <b><sup>Email </sup></b> <div style="font-size:15px;padding: 2px 0px 2px; border-bottom: 1px solid black; display:inline-block; width: 220px; overflow: hidden;"> {.! $blackmamba@gmail.com !!} </div> </td> </tr> </table>

Answer 3

尝试在外部 CSS 样式表中执行此操作。