WeasyPrint
WeasyPrint copied to clipboard
Kozea
Allow fragmentation in Flex rows
Hi WeasyPrint community,
I'm having an issue creating rows of two side-by-side tables with equal widths and page breaks allowed inside the tables.
With a flexed approach, the 2nd column table appears on the next page if the 1st column table has a page break inside (see image).
With the grid approach (commented out in the css), no page breaks occur inside the tables and the 2nd row of tables move to the next page (see image).
If there's an existing known solution to achieve this appearance or I have an issue with my css, please let me know.
Please see relevant HTML and CSS below. I am on 65.1.
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Test Test</title>
<style>
@page {
@top-left {
content: element(pageHeader);
}
@top-right {
content: element(return-to-TOC);
}
@bottom-left {
content: element(pageFooter);
}
@bottom-right {
content: "Test Test Test | " counter(page);
}
}
.metric-header {
position: running(pageHeader);
width: 100%;
margin-top: 10px;
}
.footer-metadata {
position: running(pageFooter);
width: 725px;
border-top: 1px solid #ccc;
margin-bottom: 10px;
}
.metadata:empty {
display: none;
}
.metadata {
font-size: 10px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.metadata-item {
margin-right: 15px;
max-width: 110px;
margin-bottom: 0;
}
.metadata-item-note {
margin-right: 15px;
max-width: 300px;
margin-bottom: 0;
}
.return-to-TOC {
position: running(return-to-TOC);
font-size: 10px;
text-align: right;
margin-top: 10px;
color: #7c7c7c;
text-decoration: none;
}
@page {
size: A4 landscape;
}
.page {
page-break-before: always;
}
.title-page {
page-break-before: always;
}
.table-bordered {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
page-break-inside: auto;
}
.table-bordered th,
.table-bordered td {
border: 1px solid black;
padding: 6px;
text-align: left;
font-size: 12px;
}
.table-bordered th {
background-color: #f2f2f2;
font-size: 14px;
}
.table-bordered tr {
break-inside: auto;
page-break-inside: auto;
}
h3:empty {
display: none;
}
/* .tables {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2%;
}
.table {
width: 100%;
box-sizing: border-box;
page-break-inside: auto;
}
.table:only-child {
grid-column: 1 / span 2;
} */
.tables {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 20px;
}
.table {
width: 460px;
box-sizing: border-box;
page-break-inside: auto;
}
/* plus logic to make table one width when table is a only child of tables */
</style>
</head>
<body>
<div class="metric-page page">
<div class="metric-header">
<br>
<br>
<h2>data data data</h2>
<br>
<br>
</div>
<div class="return-to-TOC">
<a href="#table-of-contents">Go to Table of Contents</a>
</div>
<div class="footer-metadata">
<div class="metadata">
<p class="metadata-item"><strong>data:</strong><br> data data data </p>
<p class="metadata-item"><strong>data:</strong><br> data data data</p>
<p class="metadata-item"><strong>data:</strong><br> data data data</p>
<p class="metadata-item-note"><strong>data:</strong><br> data data data</p>
</div>
</div>
<div class="tables">
<div class="table">
<h3>data data data</h3>
<table border="1" class="dataframe table-bordered">
<thead>
<tr style="text-align: left;">
<th>data data</th>
<th>data data</th>
<th>data data</th>
<th>data data</th>
</tr>
</thead>
<tbody>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<h3>data data data</h3>
<table border="1" class="dataframe table-bordered">
<thead>
<tr style="text-align: left;">
<th>data data</th>
<th>data data</th>
<th>data data</th>
<th>data data</th>
</tr>
</thead>
<tbody>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<h3>data data</h3>
<table border="1" class="dataframe table-bordered">
<thead>
<tr style="text-align: left;">
<th>data data</th>
<th>data data</th>
<th>data data</th>
<th>data data</th>
</tr>
</thead>
<tbody>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<h3>data data</h3>
<table border="1" class="dataframe table-bordered">
<thead>
<tr style="text-align: left;">
<th>data data</th>
<th>data data</th>
<th>data data</th>
<th>data data</th>
</tr>
</thead>
<tbody>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<h3>data data</h3>
<table border="1" class="dataframe table-bordered">
<thead>
<tr style="text-align: left;">
<th>data data</th>
<th>data data</th>
<th>data data</th>
<th>data data</th>
</tr>
</thead>
<tbody>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
</tbody>
</table>
</div>
<div class="table">
<h3>data data</h3>
<table border="1" class="dataframe table-bordered">
<thead>
<tr style="text-align: left;">
<th>data data</th>
<th>data data</th>
<th>data data</th>
<th>data data</th>
</tr>
</thead>
<tbody>
<tr>
<td>data data</td>
<td>data data</td>
<td>data data</td>
<td>data data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Thanks a lot for the report.
The problem is known for flex, it’s now referenced in #2400. Let’s keep this issue for this topic.
The equivalent problem for grid is #2397.
Until we fix these bugs, the possible (but far from perfect) workaround is to use floats or absolute element.
