Я делаю проект для своего работодателя и пытаюсь напечатать большую таблицу данных на нескольких страницах для печати.
Однако, когда я пытаюсь напечатать таблицу, верхние границы перекрываются на предыдущей странице.
Просмотр изображения:
Я попытался отредактировать границы, чтобы они были разной толщины, и применить свойства CSS, чтобы теперь можно было разбивать их на несколько страниц, однако ни одна из них не имела никакого эффекта.
Сейчас я удалил весь CSS со страницы, кроме Bootstrap и правил разрыва страницы, но у меня все еще остается та же проблема
Мой код:
table {
page-break-inside: auto
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
thead {
display: table-header-group
}
tfoot {
display: table-footer-group
}
<table id="test" class="table table-bordered thead-light">
<thead>
<tr>
<th scope="col">Date / Time</th>
<th scope="col">Log Class</th>
<th scope="col">Reason</th>
<th scope="col">Detail</th>
<th scope="col">Hold State</th>
<th scope="col">UL ID</th>
<th scope="col">SKU</th>
<th scope="col">Location</th>
<th scope="col">Destination</th>
<th scope="col">Qty</th>
<th scope="col">User</th>
</tr>
</thead>
<tbody>
Table Data
</tbody>
</table>
Я бы ожидал, что границы останутся на той странице, с которой начинается, и не будут обрезаться на предыдущей странице, однако, как вы можете видеть на исходном изображении, оно все еще вырезано.
Любая помощь будет принята с благодарностью.