Bullet proof solution for page break on table row ( tr ) for printing
It is not nice but you could try to go with separat tables for each row. By using the following syntax you can make sure the columns are rendered in the same widths.
<style>
table {
page-break-inside: avoid;
}
</style>
<table>
<colgroup>
<col width="25%" />
<col width="50%" />
<col width="25%" />
</colgroup>
<tr>
<td>Narrow column</td>
<td>Wide column</td>
<td>Narrow column</td>
</tr>
</table>
<!-- can break -->
<table>
<colgroup>
<col width="25%" />
<col width="50%" />
<col width="25%" />
</colgroup>
<tr>
<td>Narrow column</td>
<td>Wide column</td>
<td>Narrow column</td>
</tr>
</table>
Can't page break to work without messing up the table formatting
I figure out an even more hard-coding method (so call perfectly solve your problem). I must said it is not elegant.
My method's main idea is changing tbody
to display:block
(as usual), but adding the .pagebreak
to target tbody
as well.
However, this method unattach tbody
from the table and thus no longer align with thead
. That's why I add a tr
for printing thead, and remove the origin thead
when print.
Added printing th, don't show in normal view
//Thead part, add a printing thead only shown in Print
//As originaly thead will has alloction problem
{ i % 2 === 1 ?
<tr className='printing-thead'>
<td colspan="3">Results</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr> : null
}
....
...
//Corrected Page break
</tbody>
<tbody class="pagebreak">
<tr>
<td colspan="7"></td>
</tr>
</tbody>
<tbody>
...
Corresponding CSS
table {
border-spacing: 0;
table-layout: fixed;
th {
text-align: center;
}
tr {
th {
@extend %borders;
}
td {
@extend %borders;
&.data-name {
padding: 3px 100px 3px 3px;
}
&.data-point {
text-align: center;
padding: 3px 10px;
}
&.section-name {
background-color: #999;
}
}
}
tr.printing-thead {
display: none;
}
}
@media print {
thead {
display: none;
}
tbody {
display: block;
tr.printing-thead {
display: contents;
font-weight: bold;
text-align: center;
}
}
.pagebreak {
height: 0px;
break-before: always !important;
page-break-before: always !important;
page-break-inside: avoid !important;
td {
display: none;
}
}
}
The JSfiddle.
And the react version
JSfiddle React Version
Mutli-row table header wrong page break
It's ok. I created a function that manually adds rows to the table while the table's height is less than the page's height. When the table's height goes beyond page's height, I remove the last inserted row, create a new table with the same header and add the remaining rows to this table.
Related Topics
Making a Custom Input Text Type
How to Make Images Stay Within the Rows of a CSS Grid Container
How to Have HTML Text or Cdata Inside an Xml Attribute
Customise Ng Bootstrap Carousel in Angular
Z-Index Without Absolute Position
How to Apply a Border Only Inside a Table
Google Maps Shows "For Development Purposes Only"
Restoring the Value of a Input Type=File After Failed Validation
Can Xhtml and HTML Class Attributes Value Start with a Number
Google Web Fonts and PDF Generation from HTML with Wkhtmltopdf
Dropdown with a Form Inside with Twitter-Bootstrap
Floating Elements Are Outside of Containing Blocks
Thymeleaf - How to Apply Two (Or More) Styles Based on Mutually Exclusive Conditions