Младший разработчик здесь. Я пытаюсь динамически генерировать (через руль) отчет 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
Как стилизовать строку до того, как страница разрывается по сравнению с концом таблицы? ⇐ Html
Программисты Html
1750969459
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;
}
Подробнее здесь: [url]https://stackoverflow.com/questions/79681107/how-to-style-row-before-page-break-different-than-table-end[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия