在 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 樣式表中執行此操作。