Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Html2pdf Image in cell overlaps other cells

Tags:

html

css

html2pdf

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?

like image 756
Justinas Avatar asked Oct 18 '22 08:10

Justinas


1 Answers

Set the Height of the image explicitly:

...
        <td colspan="2">
            <img style="height:350px" src="http://example.com" alt="">
        </td>
...
like image 80
Shadi Shaaban Avatar answered Nov 01 '22 15:11

Shadi Shaaban