Drukowanie w Chrome odcina tekst między elementem tr dla wielu kolumn css - html, css, google-chrome

Jak mogę zapobiec temu zachowaniu?

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>

To jest moja stylizacja css. Możesz spróbować wydrukować z plunkr i zobaczysz, że tak się dzieje, Próbowałem rozwiązania z następującego posta, Dlaczego Chrome odcina tekst w moim wielokolumnowym układzie CSS3? ale nie mógł rozwiązać problemu. Post wydaje się być z 2010 roku, więc może jest nowe rozwiązanie na 2016 rok?

Odpowiedzi:

Wpadłem na podobny problem i może to może pomóc. Sprawdź swoje zapytania o media CSS.

Problem: Drukowanie powoduje odcięcie / brak zawartości u dołu strony.

Teoria:

1. Drukuj: print.window wykrywa zawartość / rozmiar strony (X)
2. Wymuś rozmiar / układ strony papieru z kontekstem (X)
3. Mniejszy rozmiar strony papierowej powoduje zapytania mediów CSS
4. Zmiany układu. W moim przypadku bootstrap "col-md-6, usunął float.
5. Która wydłuża stronę (Y)
6. Y> X ==> generuje brakującą zawartość

Moim rozwiązaniem było zaadresowanie zapytania @media, aby utrzymać mój oczekiwany układ.

Pomocne narzędzie: Narzędzia dev Chrome> Więcej narzędzi> Rendering> Emuluj media CSS> Drukuj