Css 正文中的图像与打印的AD重叠

我正在使用wkhtmltopdf从html生成pdf

在html中，有一个带有thead和tbody的表。我使用Vue生成内容：

<table class="data-table">
    <thead>
        <tr>
            <th class="title" colspan="5">Control #@{{ index + 1 }}</th>
        </tr>
        <tr>
            <th class="number">#</th>
            <th>Tittel:</th>
            <th>Kommentar:</th>
            <th>Mangelpunkt<br> Registrert:</th>
            <th>Mangelpunkt<br> Utbedret:</th>
        </tr>
    </thead>
    <tbody v-for="(checkpoint, cpIndex) in control.checkpoints">
        <tr>
            <td class="number">@{{ cpIndex + 1}}</td>
            <td>@{{ checkpoint.title }}</td>
            <td>@{{ checkpoint.comment }}</td>
            <td class="danger center">@{{ checkpoint.rejectedDate }}</td>
            <td class="success center">@{{ checkpoint.approvedDate }}</td>
        </tr>
        <tr v-if="checkpoint.images.length > 0">
            <td class="number">@{{ cpIndex + 1 }}</td>
            <td class="images" colspan="4">
                <img v-for="(image, imgIndex) in checkpoint.images" :key="imgIndex" :src="base64Images[image]" alt="print image">
            </td>
        </tr>
    </tbody>
</table>

控件#@{{index+1}
#
Tittel：
科门塔尔：
Mangelpunkt
注册表项：
Mangelpunkt
Utbedret：
@{{cpIndex+1}}
@{{checkpoint.title}
@{{checkpoint.comment}}
@{{checkpoint.rejectedDate}
@{{checkpoint.approvedDate}
@{{cpIndex+1}}

这在浏览器中可以正常工作，但如果一个图像的高度不够，无法与其他图像放在同一页上，则会断开到下一页（根据需要）但是，图像与THAD重叠

在过去的几个小时里，我尝试了各种各样的破解方法，但我无法让图片在下一个打印页面上尊重thead

这里有什么我做错的吗