使用飛碟庫生成的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