Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML tables in flex layout are getting overlapped after converting to PDF #1805

Closed
shaikmoeed opened this issue Feb 10, 2023 · 3 comments
Closed

HTML tables in flex layout are getting overlapped after converting to PDF #1805

shaikmoeed opened this issue Feb 10, 2023 · 3 comments
Labels
bug Existing features not working as expected
Milestone
65.0

Comments

@shaikmoeed
Copy link

shaikmoeed commented Feb 10, 2023 •
edited
Loading

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:

image
@liZe liZe added the bug Existing features not working as expected label Feb 10, 2023
@liZe liZe changed the title HTML tables are getting overlapped after converting to PDF HTML tables in flex layout are getting overlapped after converting to PDF Feb 10, 2023
@shaikmoeed
Copy link
Author

shaikmoeed commented Feb 13, 2023 •
edited
Loading

Hi @liZe

Thanks for editing the question to be more precise. Is there any work around for this bug?

@liZe
Copy link
Member

liZe commented Feb 14, 2023

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.

liZe added a commit that referenced this issue Feb 13, 2025
@liZe
Fix width of table flex items
dc70bcc 
Fix #1805.
liZe added a commit that referenced this issue Feb 13, 2025
@liZe
Fix width of inline tables
7e2fc05 
Related to #1805.
@liZe
Copy link
Member

liZe commented Feb 13, 2025

Bug is closed and tested in the flex branch, see #2362.

@liZe liZe closed this as completed Feb 13, 2025
liZe added a commit that referenced this issue Feb 18, 2025
@liZe
Fix width of table flex items
6d5459b 
Fix #1805.
liZe added a commit that referenced this issue Feb 18, 2025
@liZe
Fix width of inline tables
919b1a0 
Related to #1805.
liZe added a commit that referenced this issue Feb 20, 2025
@liZe
Fix width of table flex items
e4bc60c 
Fix #1805.
liZe added a commit that referenced this issue Feb 20, 2025
@liZe
Fix width of inline tables
ceeb591 
Related to #1805.
@liZe liZe added this to the 65.0 milestone Mar 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
65.0
Development

No branches or pull requests
2 participants
@liZe @shaikmoeed