PDF Table header overlapping

  • Hi,

    I am trying to show table in multiple pages, some times it works exactly as required but could not rely on it. Please find it in page no 6.

    I have added my code to Playground. There are both set of testing data: working-data and not-working-data.

    Not working:
    Not working Image

    Working Image

    Please help.

  • administrators


    the problem is that the container of the problematic table is using flexbox, flex + tables does not get along, mostly because the table is kind of content that usually grows beyond page limits and needs to be repeated and that combined with the flexbox it makes the default layout of a table to be wrong on next pages.

    the solution is that you ensure that you don't use a table inside a flexbox container, in your example this can be done by changing this on main template:

    <section class="page-container d-flex flex-column">


    <section class="page-container">

    after that i see the table works as expected again https://playground.jsreport.net/w/bjrmatos/CfJeHyah

    i'm not sure if you need that all your page have a flexbox container, but if really need it, you need to change your container to not use flexbox in case of pages that contain tables

  • It works! Removing d-flex and flex-column class fixed the issue in table pages and does not affect other pages.

    Thanks @bjrmatos you are a gem. Also, thank you for this amazing product.

Log in to reply

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.