Question

此代码适用于浏览器，但问题是，当我填充动态数据并使用dompdf生成PDF时，<td>item</td>完整列会在单元格中显示。

解决方案是什么？

浏览器显示如下Browsers View但是dom pdf生成的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>完整列会在单元格中显示。

解决方案是什么？

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>

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

1 个答案: