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

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

Сообщение Anonymous »

Младший разработчик здесь. Я пытаюсь динамически генерировать (через руль) отчет PDF с драматургом. Кажется, я не могу получить таблицу красиво расщепляться на страницы. После последней строки таблицы на первой странице я хочу, чтобы таблица закончилась прямыми углами (как на втором изображении) вместо специфичных для таблицы, округлых углов (как видно на первом изображении). Как я могу закончить первую строку более хорошо на первой странице (как видно на втором скриншоте)? Как я могу обнаружить, что конец страницы был достигнут, так что я заканчиваю таблицу не окружающими углами (чтобы указать, что таблица продолжается на второй странице)? /> желаемое решение < /h2>
Я бы хотел, чтобы фон таблицы обернул строку на первой странице, как видно на изображении ниже. Я хочу прямые углы. Но я все еще хочу сохранить округлые углы в самом конце таблицы. Более того, если я попытаюсь визуализировать страницу в браузере, она пустая, потому что все обернуто рулем.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;
}


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

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»