Избегаем разрыва страниц в строках HTML таблицы на PDF

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

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

tr { page-break-inside: avoid; }

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

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

CSS и печать: Совершенная симбиоз

Мы можем улучшить восприятие печатных документов, создав специфический класс для печати и применив к нему правила стилей:

@media print {
  .print-friendly tr { page-break-inside: avoid; }
}

Обработка сложных таблиц

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

1. Гармоничные границы: Чтобы границы таблиц были идеальными, примените border-collapse: collapse;.

2. Адекватное содержание: Добавление white-space: nowrap; к ячейкам таблицы предотвратит перенос содержимого и разрыв строк.

3. Гибкий печатный процесс: Внутри медиа-запроса @media print вы можете изменить display-свойства элемента tr. Однако стоит избегать значений, таких как inline-block или flex, которые могут повредить структуру таблицы.

4. Особенности браузеров: У каждого браузера, в том числе Chrome, есть свойства управления разрывами страниц. Регулярное тестирование печати в различных браузерах поможет избежать неожиданных неудобств.

Комбинированный CSS для оптимальных печатных макетов

Для улучшения печатных макетов можно комбинировать CSS-свойства вместе с page-break-inside: avoid:

• Прощайте, дублирование: Псевдоэлементы с 4-пиксельной высотой помогают избежать дублирования границ, которое может возникнуть при печати.

@media print {
  .print-friendly tr:before,
  .print-friendly tr:after {
    content: "";
    display: block;
    height: 4px;
  }
}

• Сохранение целостности потока: Встроенные div в td с применением page-break-inside: avoid и добавлением отступов избавляют пространство от разрывов близ текста.

@media print {
  .print-friendly td div { margin: 4px; }
}

Сталкиваемся с новым миром CSS

Для тех, кто любит экспериментировать, подойдет использование CSS Grid для создания печатных макетов:

@media print {
  .print-grid-container {
    display: grid;
  }
}

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

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

Визуализируем полученный результат:

До: Строка таблицы 📄 разрывается на границе страниц 📄
После: Строка таблицы 📄 целиком помещается на страницу 📄

Применимы следующие свойства:

tr { display: block; page-break-inside: avoid; }

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

Повторение заголовков на каждой новой странице при печати таблиц многократного использования – ключ к хорошему чтению. Ведь это словно маяк, указывающий путь:

thead { display: table-header-group; }

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

1. page-break-inside – CSS | MDN
2. break-inside | CSS-Tricks
3. CSS Paged Media Module Level 3
4. Дизайн для печати с помощью CSS — Smashing Magazine
5. break-after – CSS | MDN
6. CSS для вёрстки страниц для печати — SitePoint
7. CSS руководство | DigitalOcean