单元格中的Html2pdf图像与其它单元重叠

Question

我正在使用Html2pdf并面临着奇怪的问题：

​

​

正如您所看到的，我的图像在表中，在表下面是重叠的tr。

Html结构：

<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>

打印为HTML会产生正确的结果。

知道有什么问题吗？

Answer 1

导致错误的一些事实：

1. td只有50%宽度
2. 在浏览器视图中，colspan="2"将导致单元格的100%宽度。

要解决这个问题，我所要做的就是设置tr.single td {width: 100%}。

在HTML2PDF中添加行固定图像重叠问题。

Answer 2

显式设置图像的高度：

...
        <td colspan="2">
            <img style="height:350px" src="http://example.com" alt="">
        </td>
...

Answer 3

不太确定，但是如果指定图像高度，也许可以使用js img.naturalheight()获得img的高度；

function getImgSize(imgSrc) {
var newImg = new Image();

newImg.onload = function() {
  var height = newImg.height;
  alert ('The image size is '+height);}


newImg.src = imgSrc; // this must be done AFTER setting onload }