WeasyPrint
WeasyPrint copied to clipboard
Kozea
HTML tables in flex layout are getting overlapped after converting to PDF
PDF file: sample_output.pdf
Python code: (version :- weasyprint==57.2)
weasyprint.HTML(filename="tables.html").write_pdf(file_path)
HTML code:
<html>
<head>
<style>
/* Custom CSS */
table {
border-collapse: collapse;
width: 45%;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
/* td:first-child {
background-color: grey;
} */
.first-column {
background-color: rgb(187, 185, 185);
}
.mainWrapper {
display: flex;
flex-direction: column;
}
.rowTable {
display: flex;
flex-direction: row;
}
/* End Custom CSS */
</style>
</head>
<body>
<div class="mainWrapper">
<div class="rowTable">
<table style="margin-right: 20px;">
<tr>
<td class="first-column">table 111 Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td class="first-column">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td class="first-column">Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<table>
<tr>
<td class="first-column">table 222 Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td class="first-column">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td class="first-column">Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
<div>
<p> some paragraph </p>
<div>
<div>
<table style="margin-bottom:20px;">
<tr>
<th>table 333 Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<table>
<tr>
<th>table 444 Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Expected output:
Hi @liZe
Thanks for editing the question to be more precise. Is there any work around for this bug?
Thanks for editing the question to be more precise. Is there any work around for this bug?
I don’t think so :/.
Flex support is broken in many ways, there are a lot of issues open about this. Until we find a lot of time (or a sponsor) to fix it, it’s probably better to avoid Flexboxes.
