Search code examples
htmlcsshtml-tableflexboxweasyprint

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

Trying to convert html file to pdf using weasyprint, but due to bug in weasyprint, I can't use flex layout as it is overlapping the two tables in the first row. Is there any other workaround to get two tables in the first row side by side without disturbing other elements like <p> and two tables after that?

Instead of using flexboxes, need to use other alternative to achieve same align as mentioned in sample 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>

Actual output:( in pdf)

enter image description here

Solution

  • You could use display: inline-table; on the tables (without display:flex on their parent element). I can't check that in weasyprint, but you can try:

    table {
  border-collapse: collapse;
   width: 45%;
}
.rowTable table {
   display: inline-table;
}
:not(.rowTable) table {
   margin: 0 auto;
}

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

th {
  background-color: #f2f2f2;
}

.first-column {
  background-color: rgb(187, 185, 185);
}
    <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>