DOMPDF，表格單元格垂直對齊問題

Question

這段代碼可在瀏覽器上正常運行，但是問題是當我填充動態數據並使用dompdf生成PDF時， <td>item</td>整列會放在單元格的頂部。

解決辦法是什么 ？

瀏覽器顯示為“ 瀏覽器視圖”，但dom pdf 生成的PDF顯示為“生成的PDF”視圖

 body { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; } #header { position: fixed; left: 0px; width:100%; bottom: -150px; right: 0px; height: 150px; background-color: #4b94d9; color:#000; text-align: left; } #page-wrap { width: 700px; margin: 0 auto; } .center-justified { text-align: justify; margin: 0 auto; width: 30em; } table.outline-table { border: 1px solid; border-spacing: 0; } tr.border-bottom td, td.border-bottom { border-bottom: 1px solid; } tr.border-top td, td.border-top { border-top: 1px solid; } tr.border-right td, td.border-right { border-right: 1px solid; } tr.border-right td:last-child { border-right: 0px; } tr.center td.center { text-align: center; valign:"middle"; } td.pad-left { padding-left: 5px; line-height: 2; } tr.right-center td, td.right-center { text-align: right; padding-right: 50px; } tr.right td, td.right { text-align: right; } .content > div > span{ display:inline-block; width:50%; /* or choose some other value */ } .contentdate > div > span{ display:inline-block; width:35%; /* or choose some other value */ } 

 <table width="100%" class="outline-table"> <tbody> <tr class="border-bottom border-right" style="background:#353940;color:#FFF;"> <td width="35%" class="pad-left"><strong>Item</strong></td> <td width="10%" style="text-align:center;"><strong>Quantity</strong></td> <td width="10%" class="right"><strong>Unit Cost</strong></td> <td width="15%" class="right"><strong>Total</strong></td> </tr> <tr class="border-right"> <td class="pad-left">some item name one</td> <td style="text-align:center;">15</td> <td class="right">1500.00</td> <td class="right">22500.00</td> </tr> </tbody> </table> 

這段代碼可在瀏覽器上正常運行，但是問題是當我填充動態數據並使用dompdf生成PDF時， <td>item</td>整列會放在單元格的頂部。

解決辦法是什么 ？

Answer 1

嘗試這個。

td.pad-left {
        padding-left: 5px;
        //line-height: 2; <--remove this
}

HTML

    <tr class="border-right">
       <!-- give margin top in particular line -->
       <td class="pad-left"><p style="margin-top:10px;">some item name one</p></td>
       <td style="text-align:center;">15</td>
       <td class="right">1500.00</td>
       <td class="right">22500.00</td>
    </tr>