In my Visual-force PDF Page table is not breaking properly

Question

My requirement is table content not fit in a single page.

My code

 <table border="1" style="border-collapse: collapse;" width="100%">
                <caption>Schedule of Intallment(s) </caption>
                <tr>
                    <th width="10%" style="text-align:center;padding: 5px;">#</th>
                    <th width="15%" style="text-align:center;padding: 5px;">Percentage (%)</th>
                    <th width="25%" style="text-align:center;padding: 5px;">Date</th>
                       <!-- new line -->
                    <th width="25%" style="text-align:center;padding: 5px;">Description</th> 
                    <th width="25%" style="text-align:center;padding: 5px;">Amount (AED)</th>
                    <th width="25%" style="text-align:center;padding: 5px;">Total Amount</th> 
                </tr>
                <apex:repeat value="{!paymentlist[plot.id]}" var="pi">
                    <tr>
                        <td style="text-align:center;padding: 5px;">{!pi.Count}
                        </td>                
                        <td style="text-align:center;padding: 5px;">{!pi.percentage}
                        </td>
                        <td style="text-align:center;padding: 5px;">
                             <!-- new line pi.count==1 -->
                            <apex:outputText value="{0,date,dd-MMM-yyyy}" rendered="{!!pi.isLast && pi.Count==1}"> 
                                <apex:param value="{!pi.instllmentDate}" /> 
                            </apex:outputText>
                              <!-- new line -->
                              <apex:outputText value="During Construction" rendered="{!!pi.isLast && pi.Count != 1}"> 
                                
                            </apex:outputText>
                            <apex:outputText value="On Completion" rendered="{!pi.isLast}"> 
                               
                            </apex:outputText>
                            
                        </td>
                         <!-- new line -->
                         <td style="text-align:center;padding: 5px;">{!pi.Description}
                        </td>
                        <td style="text-align:right;padding: 5px;">
                            <apex:outputText value="AED{0, number, ###,##0.00}">
                                <apex:param value="{!pi.amount}"/>
                            </apex:outputText>
                            
                        </td>
                        <td style="text-align:right;padding: 5px;">
                            <apex:outputText value="AED{0, number, ###,##0.00}">
                                <apex:param value="{!pi.TotalAmount}"/>
                            </apex:outputText>
                            
                        </td>
                    </tr>            
                </apex:repeat>
                <tr>
                    <td style="padding: 5px;" colspan="4"><b>Total</b></td>
                    <td style="text-align:right;padding: 5px;"><b>
                        <apex:outputText value="AED{0, number, ###,##0.00}">
                            <apex:param value="{!plotTotal[plot.id]}"/>
                        </apex:outputText>
                        </b>
                    </td>
                </tr>
            </table>

How to make this table flexible depending upon the data?

Result what I am getting: The Total is getting printed into the next page. I need to print it in a single page

Answer 1

To fit on a single page, the content must fit on a page. The outside of the page is unprintable area. Try using a smaller font or resizing the columns so that they fit on 2-3 lines instead of 4-5. If you try and force the total to be on the same page, the net result is that the last line before the total will also appear on the next page.

You can try to fix it with:

<tr style="break-before: avoid-page; page-break-before: avoid;">

But, as I said, if the total line would overflow, it will take the row above it to the next page as well.