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

【问题标题】：DOMPDF, Table cell vertical align issueDOMPDF，表格单元格垂直对齐问题
【发布时间】：2015-09-25 14:15:09
【问题描述】：

此代码在浏览器上运行良好，但问题是当我使用dompdf 填充动态数据并生成 PDF 时，<td>item</td> 整列会在单元格顶部。

解决办法是什么？

浏览器显示像这样 Browsers View 但 Generated PDF by dom pdf 显示像这样 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>

此代码在浏览器上运行良好，但问题是当我使用dompdf 填充动态数据并生成 PDF 时，<td>item</td> 整列会出现在单元格的顶部。

解决办法是什么？

【问题讨论】：

从您的描述中看不出问题。您能否截屏您在浏览器中看到的内容与您在 PDF 中看到的内容？
Browers shows 但Generated PDF shows
@BrianS 我添加了截图。你能帮忙吗？
我无法使用您问题中的 HTML 重现该问题。您能否使用正确呈现的 HTML 进行更新（如果需要，您可以通过调用 $dompdf->output_html() 来获取 dompdf 在内存中的内容）。
话虽如此，您正在设置所有表格行中第一个单元格的行高。您可能需要调整代码以使标题行没有任何额外的格式。

标签： php html css dompdf codeigniter-3

【解决方案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>

【讨论】：

谢谢 Mr.Vimal Mistry 工作正常。