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?

0
2

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

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

2

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.

0

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