Как стилизовать строку до того, как страница разрывается по сравнению с концом таблицы? ⇐ Html

[Anonymous]

Я пытаюсь динамически генерировать (через руль) отчет PDF с Playwright. Кажется, я не могу получить таблицу красиво расщепляться на страницы. После последней строки таблицы на первой странице я хочу, чтобы таблица закончилась прямыми углами (как на втором изображении) вместо специфичных для таблицы, округлых углов (как видно на первом изображении). Как я могу закончить первую строку более хорошо на первой странице (как видно на втором скриншоте)? Как я могу обнаружить, что конец страницы был достигнут, так что я заканчиваю таблицу не окружающими углами (чтобы указать, что таблица продолжается на второй странице)? Страница "src =" https://i.sstatic.net/kn1g05bg.png "/>
желаемое решение
Я бы хотел, чтобы фон таблицы завершил строку на первой странице, как видно на изображении ниже. Я хочу прямые углы. Но я все еще хочу сохранить округлые углы в самом конце таблицы. Браузер, что происходит, когда строка достигает конца страницы A4, поскольку я генерирую PDF с драматургом. Более того, если я попытаюсь визуализировать страницу в браузере, это пусто, потому что все обернуто рулем .
Code
Вот стилирование таблицы, которое я думаю, что это актуально для данной проблемы:
table {
padding: 12px 4px 4px; /* top | right/left | bottom */
background: #faf9f8;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
border-radius: 12px;
outline: 1px #e9e4e2 solid;
outline-offset: -1px;
font-size: 12px;
}

tr {
padding: 0 16px; /* top/bottom | left/right */
gap: 16px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}

tbody {
align-self: stretch;
padding: 12px;
background:white;
border-radius: 10px;
outline: 1px #e9e4e2 solid;
outline-offset: -0.5px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
}

tbody tr { /* Different from just tr, as that affects tfoot elements too */
align-self: stretch;
padding: 12px 4px; /* top/bottom | left/right */
}

table tbody tr:not(:last-child) {
border-bottom: 1px #e9e4e2 solid;
}

table tbody tr:last-child{
padding-bottom: 0;
}

table tbody tr:first-child {
padding-top: 0;
}
< /code>
le < /h1>
Если вы заметите на первом изображении, границы таблиц и tbody странно, резко обрушиваются. Это было потому, что границы были определены с учетом вместо границы . По-видимому, на уровне Playwright's Page.pdf () -API это имеет значение. В Интернете они выглядят идентично.


Подробнее здесь: https://stackoverflow.com/questions/796 ... -table-end