Overlapping data while using print functionality over VF page

Question

I have a table on VF Page and it is working perfectly. when I use print functionality and print this table the data overlap at some points. Like in Q 4. I got overlapped structure but in Q 5. it's fine structure. I think the problem occurs when the page changes. I am attaching screenshot of print element and this is my table structure. I would like to appreciate any help.

<apex:repeat value="{!mapOfQuesToAnsToYearToMaleOrFemaleCount}" var="quesID" rendered="{!hasResults}">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th colspan="{!yearList.size + 3}">
                                                {!mapIdToQuestion[quesID].Name} {!mapIdToQuestion[quesID].Question_Plain__c}
                                            </th>
                                        </tr>
                                        <tr>
                                            <th>Category: {!mapIdToQuestion[quesID].Category_Name2__c}
                                                </th>
                                            <th></th>
                                            <apex:repeat value="{!yearList}" var="year">
                                                <th>
                                                    {!year}
                                                </th>
                                            </apex:repeat>
                                            <th>
                                                Total
                                            </th>
                                        </tr>
                                        <tr>
                                            <th>Answers</th>
                                            <th>Severity</th>
                                            <apex:repeat value="{!yearList}" var="year">
                                                <th>
                                                    <table style="padding:5px;">
                                                        <thead>
                                                            <tr>
                                                                <th>
                                                                    M
                                                                </th>
                                                                <th>
                                                                    F
                                                                </th>
                                                                <th>
                                                                    Total
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                    </table>
                                                </th>
                                            </apex:repeat>
                                            <th>
                                                <table style="padding:5px;">
                                                    <thead>
                                                        <tr>
                                                            <th>M</th>
                                                            <th>
                                                                F
                                                            </th>
                                                            <th>
                                                                Total
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                </table>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <apex:repeat value="{!mapOfQuesToAnsToYearToMaleOrFemaleCount[quesID]}" var="ansID">
                                            <tr>
                                                <td>
                                                    {!mapIdToAnswer[ansID].Answer_Plain__c}
                                                </td>
                                                <td style="text-align:center;">
                                                    {!mapIdToAnswer[ansID].Criticality__c}

                                                    <apex:outputPanel rendered="{!if(mapIdToAnswer[ansID].Criticality__c == '1',true,false)}">
                                                        <i class="fa fa-circle fa-lg iconcolorgreen"></i>
                                                    </apex:outputPanel> 
                                                    <apex:outputPanel rendered="{!if(OR(mapIdToAnswer[ansID].Criticality__c == '2',mapIdToAnswer[ansID].Criticality__c == '3'),true,false)}">
                                                        <i class="fa fa-circle fa-lg iconcoloramber"></i>
                                                    </apex:outputPanel>
                                                    <apex:outputPanel rendered="{!if(OR(mapIdToAnswer[ansID].Criticality__c == '4',mapIdToAnswer[ansID].Criticality__c == '5'),true,false)}">
                                                        <i class="fa fa-circle fa-lg iconcolorred" ></i>
                                                    </apex:outputPanel>
                                                </td>
                                                <apex:variable value="{!0}" var="M" />
                                                <apex:variable value="{!0}" var="F" />

                                                <apex:repeat value="{!yearList}" var="year">
                                                    <td>
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td>
                                                                        {!mapOfQuesToAnsToYearToMaleOrFemaleCount[quesID][ansID][year]['Male']}
                                                                        <apex:variable value="{!M + mapOfQuesToAnsToYearToMaleOrFemaleCount[quesID][ansID][year]['Male']}"
                                                                            var="M"
                                                                        />
                                                                    </td>
                                                                    <td>
                                                                        {!mapOfQuesToAnsToYearToMaleOrFemaleCount[quesID][ansID][year]['Female']}
                                                                        <apex:variable value="{!F + mapOfQuesToAnsToYearToMaleOrFemaleCount[quesID][ansID][year]['Female']}"
                                                                            var="F"
                                                                        />
                                                                    </td>
                                                                    <td>
                                                                        {!mapOfQuesToAnsToYearToMaleOrFemaleCount[quesID][ansID][year]['Male']+mapOfQuesToAnsToYearToMaleOrFemaleCount[quesID][ansID][year]['Female']}

                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>

                                                    </td>
                                                </apex:repeat>
                                                <td>
                                                    <table>
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    {!M}
                                                                </td>
                                                                <td>
                                                                    {!F}
                                                                </td>
                                                                <td>
                                                                    {!M+F}
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </apex:repeat>
                                    </tbody>
                                </table>
                            </div>
                        </apex:repeat>

Answer 1

I believe this is happening due to the table falling on a page-break-zone.

You can add the following style

style="page-break-inside: avoid;"

to your div inside the apex:repeat, it will ensure no div is placed in the page-break-zone.

<apex:repeat value="{!mapOfQuesToAnsToYearToMaleOrFemaleCount}" var="quesID" rendered="{!hasResults}">
     <div class="table-responsive" style="page-break-inside: avoid;">
     ...
     </div>
<apex:repeat>