HTML-Renderer
HTML-Renderer copied to clipboard
Published
20 hours ago •
ArthurHub
ArthurHub
Problem with table rowspan and colspan formating in pdf
Hi, all. I have problem with creating *.pdf file for table with rowspan and colspan.
In Html browser formating is:
In *.pdf formating is:
Table formating for text 3, text 4, text 6 is not correct.
Code is:
Is any workaround?
small fix needed: https://github.com/XPhilipp/HTML-Renderer/commit/949516efc01169faab391cdd27156441cf7330e2
I cannot see the screen shots to see what the problem is but i have a col/row span issue
HTML output
Rendered output
Template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
border-collapse: collapse;
font-family: Arial;
}
td {
border: 0px solid black;
padding: 2px;
vertical-align: top;
page-break-inside: avoid;
}
.footer {
position: fixed;
left: 30px;
top: 945px;
}
</style>
</head>
<body>
<div class="footer">
<table>
<tr>
<td style="border-top-width: .5px; font-size: 7pt; width: 20%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td style="border-top-width: .5px; font-size: 7pt; width: 60%">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</div>
</td>
<td style="border-top-width: .5px; padding: 5px">
</td>
</tr>
</table>
</div>
<table style="width: 100%; height: 40px">
<tr>
<td>
</td>
<td style="text-align: right; width: 45%; vertical-align: middle; font-weight: bold">
PROTECTED B<br>
PROTÉGÉ B
</td>
</tr>
</table>
<table style="margin-bottom: 300px">
<tr>
<td style="width: 24%"></td>
<td style="width: 26%"></td>
<td style="width: 8%"></td>
<td style="width: 21%"></td>
<td style="width: 21%"></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<table style="width: 100%">
<tr>
<td style="text-align: center; width: 50%">
Lorem ipsum dolor sit amet
</td>
<td style="text-align: center; width: 50%">
Lorem ipsum dolor sit amet
</td>
</tr>
</table>
</td>
<td colspan="2"
style="border-width: .5px; font-size: 8pt; text-align: center; line-height: 1.5em">
<div>P Lorem ipsum dolor sit amet</div>
<div style="font-weight: bold"> Lorem ipsum dolor sit amet</div>
<div> Lorem ipsum dolor sit amet</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2" style="border-width: 0 .5px .5px .5px; font-size: 8pt">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr style="font-size: 8pt;">
<td style="background-color: #E8E8E8;">
Lorem ipsum dolor sit amet
</td>
<td style="background-color: #E8E8E8; border-left-width: .5px;">
Lorem ipsum dolor sit amet
</td>
<td style="background-color: #E8E8E8; border-left-width: .5px;">
Lorem ipsum dolor sit amet
</td>
<td colspan="2" style="background-color: #E8E8E8; border-left-width: .5px;">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr style="font-family: 'Courier New'; font-size: 10pt">
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td style="border-left-width: .5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td style="border-left-width: .5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td style="border-left-width: .5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
<td style="border-left-width: .5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr style="font-size: 8pt">
<td colspan="3" style="background-color: #E8E8E8; border-top-width: .5px;">
Subject – Objet
</td>
<td colspan="2" style="background-color: #E8E8E8; border-width: .5px 0 0 .5px;">
Date and time of incident/observation<br>
Date et heure de l'incident ou l'observation
</td>
</tr>
<tr style="font-family: 'Courier New'; font-size: 10pt;">
<td colspan="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</td>
<td style="border-left-width: .5px;">
Lorem ipsum dolor sit ametasdfsadf
</td>
<td style="border-left-width: .5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>
</tr>
<tr>
<td colspan="5" style="background-color: #E8E8E8; border-top-width: 1.5px; font-size: 8pt; font-weight: bold">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td colspan="5" style="font-family: 'Courier New'; font-size: 10pt; white-space: pre-line;">
<div style="height: 300px">
Lorem ipsum dolor sit amet
</div>
</td>
</tr>
<tr>
<td colspan="5" style="border-top-width: 1.5px; font-size: 8pt">
<div>
Lorem ipsum dolor sit amet
</div>
<div>
Lorem ipsum dolor sit amet
</div>
</td>
</tr>
<tr>
<td colspan="5" style="background-color: #E8E8E8; border-top-width: .5px; font-size: 10pt; font-weight: bold">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td colspan="3" style="font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
<td style="border-width: 0 0 0 .5px; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
<td style="border-width: 0 0 0 .5px; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td colspan="4" style="border-width: .5px 0 0 0; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
<td style="border-width: .5px 0 0 .5px; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td colspan="5" style="background-color: #E8E8E8; border-top-width: .5px; font-size: 10pt; font-weight: bold">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td colspan="3" style="font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
<td style="border-width: 0 0 0 .5px; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
<td style="border-width: 0 0 0 .5px; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td colspan="4" style="border-width: .5px 0 .5px 0; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
<td style="border-width: .5px 0 .5px .5px; font-size: 8pt; height: 50px">
Lorem ipsum dolor sit amet
</td>
</tr>
</table>
</body>
</html>
Any news on this issue?
i just messed with col and row span values and got it to look how i wanted.. i havent looked at this in 2 years but i did manage to get it working