使用WeasyPrint转PDF时Flex布局表格重叠的替代方案咨询

问题 #

我正在使用weasyprint将HTML文件转换为PDF，但由于weasyprint存在bug，使用flex布局会导致第一行的两个表格重叠。需要找到替代方案，让第一行的两个表格并排显示，同时不影响<p>标签及后续两个表格等其他元素，实现与原flex布局相同的对齐效果。

原示例代码：

<html>

<head>
    <style>
        /* Custom CSS */
        table {
            border-collapse: collapse;
            width: 45%;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        .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>

实际PDF输出效果：

解决方案 #

方案1：使用浮动（Float）布局 #

通过给表格设置左浮动替代flex实现并排效果，同时给父容器添加清除浮动的样式，避免影响后续元素。

修改后的完整代码：

<html>

<head>
    <style>
        /* Custom CSS */
        table {
            border-collapse: collapse;
            width: 45%;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        .first-column {
            background-color: rgb(187, 185, 185);
        }

        /* 替换flex布局为浮动 */
        .rowTable {
            /* 清除浮动容器，避免影响后续元素 */
            overflow: hidden;
        }

        .rowTable table {
            float: left;
        }

        /* 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>

方案2：使用inline-block布局 #

将表格设置为inline-block使其在同一行显示，同时通过父容器设置font-size: 0消除元素间的空白间隙，再恢复表格内的字体大小。

修改后的核心CSS：

/* 替换flex布局为inline-block */
.rowTable {
    font-size: 0; /* 消除inline-block元素间的空白间隙 */
}

.rowTable table {
    display: inline-block;
    vertical-align: top; /* 确保表格顶部对齐 */
    font-size: 16px; /* 恢复表格内字体大小 */
}

内容的提问来源于stack exchange，提问作者shaik moeed