Изображение на теле накладывается на изображение

Question

Я использую wkhtmltopdf для генерации pdf из html.

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

Это прекрасно работает в браузере, но если одно изображение достаточно высокое, чтобы не помещаться на той же странице, что и другие изображения, оно разбивается на следующая страница (как и хотел). Однако , изображение перекрывает thead ..

Я пытался применить все виды хаков к этому последние часы, но я просто не могу заставить изображение уважать thead на следующей странице печати ..

Есть что-то, что я делаю здесь неправильно?