Html2pdf Image in cell overlaps other cells

Question

I'm using Html2pdf and facing strange issue:

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 1

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.