使用飞碟库生成的pdf中的格式问题

我正在使用飞碟库将xhtml转换为pdf。我在pdf的两页之间的边界上遇到格式问题。如附件截图所示，每当pdf页面发生变化时，代表不同图例的颜色编码框就会被分割。这看起来不太好。附加是一个样本xhtml，其中包含生成pdf的代码示例。 xhtml正确显示，没有任何格式问题。有别人遇到过类似的问题吗？这有什么可能的解决方案？使用飞碟库生成的pdf中的格式问题

XHTML输入文件

<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