title: Formatting issue in generated pdf using flying-saucer library
body: <p>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 ?</p>
  
  <p>XHTML input file</p>
  
  <pre><code>    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  
  
  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;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;div id='legends' class='legends' style='width:100%;float:left'&gt;
          &lt;table width="100%" class="diff" style="background-color: rgb(235, 235, 235); "&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td width="50%"&gt;
                      &lt;/td&gt;
                      &lt;td width="100%" style=""&gt;
                          &lt;table cellspacing="0" cellpadding="1" width="100%" class="diff"&gt;
                              &lt;tbody&gt;
                                  &lt;tr&gt;
                                  &lt;td style="width: 20%;"&gt;&lt;b&gt;Legend : &lt;/b&gt;&lt;/td&gt;
                                  &lt;td style="text-align: center; width: 20%; border:1px solid;" class="empty"&gt;Empty&lt;/td&gt;
                                  &lt;td style="text-align: center; width: 20%; border:1px solid;" class="delete"&gt;Deleted&lt;/td&gt;
                                  &lt;td style="text-align: center; width: 20%; border:1px solid;" class="replace"&gt;Modified&lt;/td&gt;
                                  &lt;td style="text-align: center; width: 20%; border:1px solid;" class="insert"&gt;Inserted&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/DGEG4.jpg" alt="Image showing formatting issue in PDF"></p>