Dompdf table border issue when HTML code converted to pdf file
Question
I am using the DOMPdf library to convert HTML code to PDF. I have designed the table in HTML when I run the file in the browser which renders fine but when I actually generate the PDF file one cell has right side border missing and one cell which should not display the border has borders.
Expected result
Actual Result I Got.
Here is my code
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>PaySlip</title>
<style>
.custom-font {
font-weight: bold;
}
table.blueTable {
border: 1px solid #000000;
background-color: #ffffff;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.blueTable td,
table.blueTable th {
border: 1px solid #020202;
padding: 3px 2px;
}
table.blueTable tbody td {
font-size: 13px;
}
table.blueTable tr:nth-child(even) {
background: #ffffff;
}
table.blueTable thead {
background: #1c6ea4;
background: -moz-linear-gradient(top,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
background: -webkit-linear-gradient(top,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
background: linear-gradient(to bottom,
#5592bb 0%,
#327cad 66%,
#1c6ea4 100%);
border-bottom: 2px solid #444444;
}
table.blueTable thead th {
font-size: 15px;
font-weight: bold;
color: #ffffff;
border-left: 2px solid #d0e4f5;
}
table.blueTable tfoot td {
font-size: 14px;
}
table.blueTable tfoot .links {
text-align: right;
}
</style>
</head>
<body>
<table class="blueTable">
<thead>
<tr>
<th colspan="4" style="text-align: center">
Payslip for the Month of XYZ - 2019
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="custom-font">Name Of Employee</td>
<td>Placeholder</td>
<td class="custom-font">Payable Days</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Employee Code</td>
<td>Placeholder</td>
<td class="custom-font">Paid Days</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Designation</td>
<td>Placeholder</td>
<td class="custom-font">Joining Date</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">PAN No.</td>
<td>Placeholder</td>
<td class="custom-font">Date Of Birth</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">Aadhaar No.</td>
<td>Placeholder</td>
<td class="custom-font">Bank Name</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">PF No.</td>
<td>Placeholder</td>
<td class="custom-font">Bank Account No</td>
<td>Placeholder</td>
</tr>
<tr>
<td class="custom-font">UAN</td>
<td>Placeholder</td>
<td class="custom-font">Location</td>
<td>Placeholder</td>
</tr>
<!-- space -->
<tr style="border-right:">
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td> </td>
</tr>
<!-- Salary info -->
<tr style="text-align: center">
<th>Earnings</th>
<th>Amount[INR]</th>
<th>Deductions</th>
<th>Amount[INR]</th>
</tr>
<tr>
<td class="custom-font">Basic Salary</td>
<td></td>
<td class="custom-font">Provident Fund</td>
<td></td>
</tr>
<tr>
<td class="custom-font">House Rent Allowance</td>
<td class="custom-font"></td>
<td class="custom-font">Professional Tax</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Conveyance Allowance</td>
<td></td>
<td class="custom-font">TDS</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Medical Allowance</td>
<td></td>
<td rowspan="3"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td class="custom-font">Mobile Allowance</td>
<td></td>
</tr>
<tr>
<td class="custom-font">Executive Allowance</td>
<td></td>
</tr>
<!-- space -->
<tr>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td style="border-right-style: hidden;"> </td>
<td> </td>
</tr>
<!-- Totals -->
<tr>
<th>Total Earnings</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th colspan="4">Net Pay : - Rs. 00,000.00/-</th>
</tr>
<tr>
<th colspan="4">
Net Pay (In Words): - Rs. 0 Thousand 0 Hundred and 0 Only
</th>
</tr>
<!-- space -->
<tr style="border-bottom:hidden">
<td colspan="4" style="border-left-style: hidden;border-right-style: hidden;text-align: center">
"This is a computer generated statement and does not require any
signature or stamp."
</td>
</tr>
<!-- leave details -->
<tr>
<th class="custom-font" colspan="4" style="border-left-style:hidden;border-right-style:hidden">Leave Balance</th>
</tr>
<tr>
<td class="custom-font" colspan="2">Accumulated Leave (Opening Leaves)</td>
<td colspan="2">0</td>
</tr>
<tr>
<td class="custom-font" colspan="2">Leave Taken</td>
<td colspan="2">0</td>
</tr>
<tr>
<td class="custom-font" colspan="2">Leave Balance (Closing Leaves)</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
</body>
</html>
1 answers
solution1
2 ACCPTED 2019-06-18 00:05:00
This is a rendering issue with Dompdf versions 0.8.3 and earlier. The core of the issue is the rendering order of the table cells in combination with the technique used to render table cell borders and backgrounds when the borders are collapsed.
First, as with everything in Dompdf earlier elements are rendered before later elements in the document structure. When a cell spans rows it is rendered prior to cells in the following rows. This is important because of the stacking order of objects in the PDF (later objects are rendered above earlier ones).
Second, cell borders are rendered by a single cell within a grouping of any two adjacent cells. For horizontally adjacent cells the cell on the right renders the left border. For vertically adjacent cells the cell on the bottom renders the top border.
Third, cell backgrounds are rendered to the edge of the cell without consideration of borders.
Now take these three facts into account in consideration of a row-spanned cell that is to the right of other table cells. The left border of the row-spanned cell will be rendered. The adjacent cells in the following row will not render a border, and any background is rendered the full width of the cell. Because of this the later cell's background will render over top of the border of the row-spanned cell.
You can see this issue in the following example (when run in, for example, Dompdf 0.8.3):
<head>
<title>Row-span overlap</title>
<style>
table {
border-collapse: collapse;
}
table td {
border: 1px solid red;
background-color: #0000ff66;
}
.rowspan {
border-left-width: 10px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</html>
The issue will be addressed in Dompdf 0.8.4. The primary change to address the bug was to render the background within the border.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.