Bootstrap 4 отзывчивых таблицы разрывается при печати - PullRequest
Новая
       40

Bootstrap 4 отзывчивых таблицы разрывается при печати

0 голосов
/ 20 сентября 2018

У меня есть приложение с множеством длинных таблиц с разным количеством столбцов.Решив проблемы с отображением с помощью класса .table-responsive Bootstrap, я столкнулся с несколькими проблемами при подготовке таблицы стилей для печатной версии.

Вот мой код:

HTML 

%table.table.table-borderless
  %thead
    %tr
      %th Random header text
      -# a bunch of %th elements here
  %tbody
    %tr 
      %td
      -# a bunch of %td elements here

CSS (соответствующая часть) 

@media print {
  @page {
    size: A4 landscape;
  }
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: normal !important;
    zoom: .95;
  }
  .alert, .paginate, ... {
    display: none;
  }

  div {
    margin: 0 auto !important;
  }
  table {
    border-collapse: collapse !important;
    margin: 0;
  }

  table { page-break-inside:auto }
  tr    { page-break-inside:avoid !important; page-break-after:auto }
  thead { display:table-header-group }
}

Проблемы

  • Странный пробелмежду строками, которые не находятся в конце страницы (но, вероятно, были бы, если бы не было zoom: .95)
  • Последняя строка на странице часто сокращается пополам, несмотря на tr { page-break-inside:avoid !important; page-break-after:auto }
  • Заголовки таблиц, которые повторяются в начале каждой страницы, перекрываются со строками таблицы

enter image description here

Попытки решения

  • Модификации *{zoom: ...} значение
  • Модификации table, th, td {font-size: ...}
  • Использование max-width: fit-content(..%);пробовал как на .table-responsive, так и на table
  • , используя table { page-break-inside:avoid }: он решает проблему с разрывом строк и перекрывающимися заголовками, но создает огромный пробел перед таблицей
...