DOMPDF，表格单元格垂直对齐问题

Question

This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.

What is the solution ?

Browsers shows like this Browsers View but Generated PDF by dom pdf shows like this Generated PDF View

 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> 

This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.

What is the solution ?

Answer 1

Try This.

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>