VF page rendered as PDF - Empty column header

Question

For most part the VF page is rendering correctly as PDF. There is however one scenario that we are not able to find a solution for. Please see below image. It is showing empty table and column header at the end of the page.

This is happening because there is not enough space to print the "tr" and hence it continues on next page.

The document does not look professional. Is there a way to not-show/hide empty table header?

Note: the content is dynamic, so showing "Table 2" on new page always is not an option.

Here is the css

div, table tr { page-break-inside: avoid; }

Answer 1

Generally Divs are best avoided with PDFs. That being said, try altering your CSS to match the following to see it helps.

< div style="page-break-after: always;" >
your content here
< /div>

What I notice that seems particularly odd about your screen capture is there doesn't appear to be any content in your <TD>'s. You might want to also alter your CSS to add something like:

div, table tr td { page-break-inside: avoid; }

Otherwise, you'd need to modify your code to ignore lines with empty content and not attempt to print them. That's easy to do if you're using an Apex repeat by adding something like:

<apex:variable var="v" value="" rendered="{!NOT(ISBLANK(TheField__c))}">
<tr>
<td><apex:outputLabel rendered="if field is not blank"><td>
</tr>
</apex:variable>