Whole table (instead of overflowed rows) is carried to the second page

[nhattantran]

I use <tfoot> tag to define a table footer row so that all pages have that row in the end of the table

However when I add one more row, the whole table is carried to the next page (the cyan part indicates the bottom limit using page margin)

When I add 2 more rows, it works normally (only the last row is carried to the next page) and the footer row is shown at both pages

I am using version 66.0

[liZe]

Hi,

Could you please provide a sample, so that we can reproduce your problem?

[nhattantran]

Hi,

Could you please provide a sample, so that we can reproduce your problem?

Hi @liZe what do you mean by "sample"? html, css code? You can see that from the above image, the whole table is on page 1. However, when I add 1 more row, the whole table is carried to the second page. I expect that only the last row is carried to the next page

[grewn0uille]

Hi,

By "sample" we indeed mean the HTML/CSS leading to the issue. So we can reproduce the problem and then find the cause!

[nhattantran]

Here is my html code

<table>
          <thead class="table-header">
          <tr>
            <th style="min-width: 45px" class="text-left table-header-border-top">Date</th>
            <th style="min-width: 50px" class="text-left table-header-border-top">Details</th>
            <th style="min-width: 30px" class="text-right table-header-border-top">a</th>
            <th style="min-width: 30px" class="text-right table-header-border-top">b</th>
            <th style="min-width: 30px" class="text-right table-header-border-top">c</th>
            <th style="min-width: 50px" class="text-right table-header-border-top">d</th>
          </tr>
          </thead>
          <tbody>
          {% if template_data.data %} {% for row in
          template_data.data %}

          <tr>
            <td class="text-left">{{row.date}}</td>
            <td class="text-left">{{row.narrative}} </td>
            <td class="text-right">{% if row.a %}{{row.a}}{% else %}-{% endif %}</td>
            <td class="text-right">{% if row.b %}{{row.b}}{% else %}-{% endif %}</td>
            <td class="text-right">{% if row.c %}{{row.c}}{% else %}-{% endif %}</td>
            <td class="text-right">{{row.d}}</td>
          </tr>
          </tbody>
          {% endfor %}
          {% else %}
          <tbody>
          <tr>
            <td colspan="6" class="empty-text">No Data.</td>
          </tr>
          </tbody>
          {% endif %}
          <tfoot>
          <tr>
            <td colspan="3" style="padding-top: 10px">TFoot abcdef</td>
            <td colspan="3" style="text-align: right; padding-top: 10px">TFoot 12345567</td>
          </tr>
          </tfoot>
        </table>

CSS

table {
    width: 100%; /*473px*/
    margin: 20px auto;
    border-collapse: collapse;
    table-layout: auto;
}

th,
td {
    text-align: right;
}

th {
    font-family: DM Sans;
    font-weight: 500;
    font-size: 7px;
    line-height: 150%;
    letter-spacing: -0.5px;
    border-top: 1px solid #CDE4E4;
    border-bottom: 1px solid #CDE4E4;
    padding: 6px 12px 6px 12px
}

td {
    font-family: DM Sans;
    font-weight: 400;
    font-size: 7px;
    line-height: 150%;
    letter-spacing: 0px;
    border-bottom: 0.5px solid #CDE4E4;
    padding: 6px 12px 6px 12px;
}

tr {
    page-break-inside: avoid
}

.table-header-border-top {
    border-top: 1px solid #CDE4E4;
}

tfoot > tr {
    padding: 0px 12px 0px 12px;
}

tfoot > tr > td {
    border: none;
    display: table-cell;
    color: #5C7070;
    font-family: DM Sans;
    padding: 12px 12px 12px 12px;
    font-size: 7px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0px;
    text-align: left;
}

[nhattantran]

css page config

@page {
    size: 612px 792px;
    margin: 146px 0 130px 0;
    background: #7CAEB8;
}

[nhattantran]

I finally find out the reason for this phenomenon. I wrap this table using a <div> tag which has padding-bottom: 6px, which may affect the page break algorithm

In conclusion, we should not have padding-bottom for the container table

[liZe]

There’s probably a bug, let’s keep this issue open until we fix it.