0

In my PDF Visualforce page, below table breaks and goes to new page. Is there any way that I can repeat the header of the table if it breaks to new page at the beginning?

Visualforce HTML Table

<div class="content" id="ct">
                       <table id="dataTable" border="1px" width="70%" height="50%" class="repeatTableHeader" style="page-break-inside:auto;">
                          <tr colspan="30" class="topHeader" style="page-break-inside:auto;display: table-row-group;" id="theader">
                                <th scope="col" colspan="24" class="topHeader" >Please PRINT FULL NAME NEATLY First Name, Last Name</th>                     
                                <th scope="col" colspan="5" class="topHeader" style="width: 40% !important;">Attendee signature</th>
                                <th scope="col" colspan="1" class="topHeader" style="width: 10% !important;">Opt out of meal</th>
                            </tr>
                            <apex:variable var="color" value="{!1}"/> 
                            <apex:repeat value="{!attlist}" var="att">
                                <tr style="background-color:{!IF(mod(color,2)=0, '#FFFFFF', '#D3D3D3')}; page-break-inside:avoid; page-break-after:auto"> 
                                    <td colspan="1" style="width:30px !important;text-align:center;">{!att.seqNo}</td>
                                    <td colspan="23" class="nameColumns" >{!att.attendeeName}</td>                        
                                    <td colspan="5"></td> 
                                    <td colspan="1" ></td>
                                    <apex:variable value="{!color+1}" var="color" /> 
                                </tr>

                         </apex:repeat>                                              
                        </table>  
                      </div>

Can someone please help me?

1

put this in your css inline of table: -Fs-table-paginate: paginate;

<table style="-Fs-table-paginate: paginate"></table>

|improve this answer|||||
1

Try to follow this example :

 <table class="c_table">
        <thead>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tbody>


                <apex:repeat>
                    <tr style="page-break-inside:avoid">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </apex:repeat>



        </tbody>
 </table>       


/// css code 
.c_table{
    -fs-table-paginate: paginate;
     border-spacing: 0;
     table-layout:fixed
}
table td {
   width:11%;

}

Following the suggestion in the commet of @Derek F . Take a tour at https://flyingsaucerproject.github.io/flyingsaucer/r8/guide/users-guide-R8.html you can find the exact definition of the property (-fs-table-paginate: paginate) . For consistency I quote here the definition for this case :

When used with the value paginate, modifies the table layout algorithm to repeat table headers and footers on subsequent pages and improve the appearance of cells that break across pages (for example by closing and reopening borders), but that's all it does. If a table's minimum width is wider than the page, it will be chopped off.

|improve this answer|||||
  • This answer is what we call a code dump. Code dumps typically don't make very good answers because they don't help people understand what the problem was, or how to avoid similar situations in the future. At the very least, I'd like to see you explain what the key differences between your approach and the original approach are. If you can include more details (how does it work? what browsers does this work for? are there any browsers that this doesn't work for? what are the limitations (if any)?), then that'll serve to increase the value of your answer for other people visiting this question – Derek F Jun 25 '19 at 13:53
  • thanks for the advice I hope I was clear – riccardo_castellano Jun 25 '19 at 14:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.