Печать таблицы с любым числом строк в CSS: page-break

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

Для упрощения чтения печатных версий обширных таблиц, используйте CSS-свойство page-break-inside: avoid для элементов tr. Это поможет избежать разрывов строк между различными страницами:

@media print {
  tr { 
    page-break-inside: avoid; 
  }
  thead { 
    display: table-header-group; 
  }
}

Такой подход позволит отображать заголовки таблиц на каждой странице, и строки таблицы не будут разрываться.

Основы использования CSS-свойства Page Break в таблицах

Избегание разрыва строк

Применение свойства page-break-inside: avoid; является крайне значимым для сохранения целостности строк таблицы при печати.

Подробнее об этом расскажет наш спикер на видео

Переход на новую страницу без излишеств

Свойство page-break-after: always;, используемое после строки tr, создаёт новую страницу после текущей строки. Однако, его частое использование может приводить к выводу одной строки на странице, что неэффективно для больших таблиц.

Совместимость с браузерами

Не забывайте проверять совместимость свойства с различными браузерами на сайте Can I use..., так как это может влиять на результаты печати.

Решения и продвинутые советы

Использование JavaScript для управления страницами таблицы

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

Стилизация для печати

Внутри @media print скрывайте ненужные элементы, такие как навигацию и несущественные изображения, используя свойство display: none.

Дополнительные CSS-свойства

В специфических ситуациях может потребоваться применение свойств, наподобие clear: both; для псевдоэлементов, чтобы управлять разрывами, или ручная настройка отступов (margin).

Поддержка сообщества

Форумы, такие как Salesforce для разработчиков, предлагают практические решения, которые можно подстроить под свои потребности.

Визуализация

Таблицы функционируют подобно поезду, состоящему из вагонов, где CSS-свойство page break действует как станции, обеспечивающие плавные переходы между страницами.

Динамические разрывы страниц с использованием JavaScript

С помощью JavaScript создавайте CSS-классы, которые будут применять разрывы страниц в зависимости от количества строк или высоты таблицы.

Точки разрыва с использованием div

Ручное определение точек разрыва с использованием div позволяет контролировать процесс печати, если автоматическая система не справляется с задачей.

Линейные стили против стилей с классами/ID

Избегайте линейных стилей для разрывов страниц, отдавая предпочтение классам и ID для сохранения чистоты кода.

Полезные материалы

1. break-after – CSS | MDN — документация CSS о разрыве страниц.
2. Полное руководство по элементу table | CSS-Tricks — примеры печати таблиц.
3. CSS Модуль Фрагментации, уровень-3 — спецификация для управления разрывами страниц.
4. Сообщения о разрывах страниц в таблицах на Stack Overflow.
5. Дизайн для печати с помощью CSS — Smashing Magazine — рекомендации по адаптации веб-дизайна.
6. page-break-after | Codrops — подробный ресурс о page-break-after.
7. Совместимость CSS-свойств | Can I use... — проверка совместимости браузеров.