Хромированная печать отключает текст между tr-элементом для многоколоночного css

Question

Как предотвратить это поведение?

https://plnkr.co/edit/QoO2hWmXVhSCSyA4bUh4?p=preview

<style type="text/css"> 
      table { 
       border-collapse: collapse; 
      } 

      table, th, td { 
       border: 1px solid black; 
      } 
      @page { 
       size: auto; /* auto is the initial value */ 
       margin: 5mm 7mm 5mm 7mm; /* margin you want for the content */ 
      } 

      html { 
       background-color: #FFFFFF; 
       margin: 0px; /* this affects the margin on the html before sending to printer */ 
      } 
      table { page-break-inside: avoid } 
      tr { page-break-inside: avoid; page-break-after: avoid } 
      thead { display: table-header-group } 
      tfoot { display: table-footer-group } 
      .paper { 
       font-size: 11pt; 
       -webkit-print-color-adjust: exact; 
       -moz-column-count: 2; 
       -moz-column-gap: 10px; 
       -webkit-column-count: 2; 
       -webkit-column-gap: 10px; 
       column-count: 2; 
       column-gap: 10px; 
      } 

      .website { 
       font-size: 11pt; 
       -webkit-print-color-adjust: exact; 
       -moz-column-count: 2; 
       -moz-column-gap: 10px; 
       -webkit-column-count: 2; 
       -webkit-column-gap: 10px; 
       column-count: 2; 
       column-gap: 10px; 
      } 

      .inline { 
       -webkit-print-color-adjust: exact; 
       display: inline-block; 
       width: 100%; 
      } 

      .customer-color { 
       -webkit-print-color-adjust: exact; 
       background-color: rgba(38, 194, 129, 0.1); 
      } 

      .partner-color { 
       -webkit-print-color-adjust: exact; 
       background-color: rgba(227, 91, 90, 0.1); 
      } 
     </style> 

Это мой стиль CSS. Вы можете попробовать распечатать с plunkr и увидите, что это происходит, Я пробовал решение из следующего сообщения, Why is Chrome cutting off text in my CSS3 multi-column layout?, но не смог исправить проблему. Сообщение, похоже, с 2010 года, возможно, есть новое решение на 2016 год?

Answer 1

У меня возникла аналогичная проблема, и, возможно, это может помочь. Проверьте свои медиа-запросы CSS.

Задача: Печать приводит к тому, что содержимое в нижней части страницы будет отключено/отсутствует.

Теория:

1. Print: print.window детектирует содержание страницы/размер (X)
2. Force бумаги размера страницы/макет с контекстом (X)
3. размера Меньших бумаг страницы триггеров CSS медиа-запросы
4. Изменения макета. В моем случае col-md-6 bootstrap удаляется float.
5. Какие удлиняется страницу (Y)
6. Y> X ==> производит пропавшего содержания

Мое решение было обратиться запрос @media, чтобы сохранить свою ожидаемую структуру.

Полезный инструмент: Chrome Dev инструменты> Другие инструменты> Рендеринг> Эмуляция CSS Медиа> Печать