Justinas Justinas - 5 months ago 38
HTML Question

Html2pdf Image in cell overlaps other cells

I'm using Html2pdf and facing strange issue:

overlapping image

As you see my image is inside table and is overlapping

tr
below it

Html structure:

<table>
<tbody>
<tr>
<td rowspan="2" class="page-title">
Running style - head and arms isolated
</td>
<td>
EARLY: Physical - Fast
</td>
</tr>
<tr>
<td></td>
</tr>
<tr class="images single">
<td colspan="2">
<img src="http://example.com" alt="">
</td>
</tr>
<tr>
<td colspan="2" class="block-header">
Outcomes
</td>
</tr>
<tr>
<td colspan="2">
Know how to keep head still and employ efficient, correct arm drive
</td>
</tr>
/* ... */
</tbody>
</table>


CSS:

<style>
table {
width: 100%;
}

td {
width: 50%;
}

tr img {
width: 70%;
}
</style>


Printing as HTML produces correct result.

Any idea what can be issue?

Answer

Some facts that leads to error:

  1. td has only 50% width
  2. In browser view colspan="2" will lead to 100% width of cell.

Now to fix that issue all I had to do is to set tr.single td {width: 100%}.
Adding that line fixed image overlap issue in HTML2PDF.