Formatting issue in generated pdf using flying-saucer library

I am using flying-saucer library to convert xhtml to pdf. I am getting a formatting issue on the boundary between two pages of pdf. As shown in the attached screenshot, the color coding boxes representing the different legends gets splitted whenever there is a page change in pdf. This is not looking good. Attached is a sample xhtml which contains a sample of the code for which pdf is generated. The xhtml is getting displayed correctly without any formatting issues. Has someone else encountered a similar problem ? What is the possible solution for this ?

XHTML input file

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>


table.diff {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 11px;
    border-collapse:collapse;
}
table.diff tbody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff tbody th {
    font-family: Arial, Helvetica, sans-serif;
    background:#F5F5F5;
    font-size:11px;
    font-weight:normal;
    color:#999999;
    padding:.3em .5em .1em 2em;
    text-align:right;
    vertical-align:top;
}
table.diff thead {
    border-bottom:1px solid #BBC;
    background:#EFEFEF;
    font-family:Verdana;
}
table.diff thead th.texttitle {
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

table.diff td {
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    padding: 2px 2px;
}

table.diff .empty {
    background-color:#D7F0FC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff .replace {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color:#FFD899;
}
table.diff .delete {
    background-color:#FF9900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff .skip {
    background-color:#EFEFEF;
}
table.diff .insert {
    background-color:#ADCC70;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff th.author {
    text-align:right;
    border-top:1px solid #BBC;
    background:#EFEFEF;
}


.top-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-top: 1px solid #67BBE5;
}

table.diff .left-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-left: 1px solid #CCCCCC;
}

.bottom-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-left: 1px solid #67BBE5;
}

table.diff .left-bottom-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-left: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

table.diff .bottom-border-grey {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-bottom: 1px solid #CCCCCC;
}
table .top-border-line {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0px;
    border-top: 1px solid #CCCCCC;
}
table .bottom-border-line {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0px;
    border-bottom: 1px solid #CCCCCC;
}
table.diff .legend-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border: 1px solid #CCCCCC;
}

</style>

</head>


<body>

<div id='legends' class='legends' style='width:100%;float:left'>
        <table width="100%" class="diff" style="background-color: rgb(235, 235, 235); ">
            <tbody>
                <tr>
                    <td width="50%">
                    </td>
                    <td width="100%" style="">
                        <table cellspacing="0" cellpadding="1" width="100%" class="diff">
                            <tbody>
                                <tr>
                                <td style="width: 20%;"><b>Legend : </b></td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="empty">Empty</td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="delete">Deleted</td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="replace">Modified</td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="insert">Inserted</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    </body>

</html>

Image showing formatting issue in PDF

Solution

You can try to control the page-breaks with the page-break-inside css property.

This property is supported by flying-saucer, but it can be difficult to get it right in all cases, especially to avoid corner cases.

In my templates, I usually use this :

tr{page-break-inside:avoid;}

Another option is to force the page break where you need it using page-break-before: always