title: CSS to PDF,the css in Flying Saucer : -fs-table-paginate result in border-collapse:collapse invalid
body: <p>Now I am using <strong>xhtmlrenderer</strong> to covert html to PDF.
  My maven dependancy as follows:</p>
  
  <pre><code>    &lt;dependency&gt;
          &lt;groupId&gt;org.mvel&lt;/groupId&gt;
          &lt;artifactId&gt;mvel2&lt;/artifactId&gt;
          &lt;version&gt;2.1.0.drools2&lt;/version&gt;
          &lt;scope&gt;compile&lt;/scope&gt;
          &lt;optional&gt;true&lt;/optional&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;org.xhtmlrenderer&lt;/groupId&gt;
          &lt;artifactId&gt;core-renderer&lt;/artifactId&gt;
          &lt;version&gt;R8&lt;/version&gt;
          &lt;scope&gt;compile&lt;/scope&gt;
          &lt;optional&gt;true&lt;/optional&gt;
      &lt;/dependency&gt;
      &lt;dependency&gt;
          &lt;groupId&gt;com.lowagie&lt;/groupId&gt;
          &lt;artifactId&gt;itext&lt;/artifactId&gt;
          &lt;version&gt;2.0.8&lt;/version&gt;
          &lt;scope&gt;compile&lt;/scope&gt;
          &lt;optional&gt;true&lt;/optional&gt;
      &lt;/dependency&gt;
  </code></pre>
  
  <p>I am trying to repeat the table head in every PDF's page.So I use the css:</p>
  
  <pre><code>table {
          -fs-table-paginate: paginate;
      }`
  </code></pre>
  
  <p>The explain for the CSS is <a href="http://flyingsaucerproject.github.com/flyingsaucer/r8/guide/users-guide-R8.html#xil_43" rel="nofollow noreferrer">here</a>.</p>
  
  <pre><code>-fs-table-paginate
  </code></pre>
  
  <ul>
  <li><p>when used with the value <code>-fs-table-paginate: paginate</code>, modifies the table layout algorithm to repeat table headers and footers on subsequent pages and improve the appearance of cells that break across pages (for example by closing and reopening borders), but that's all it does. If a table's minimum width is wider than the page, it will be chopped off.</p></li>
  <li><p>When add the above css my table's borders are detached.</p></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/zDQjj.png" alt="enter image description here"></p>
  
  <ul>
  <li>Before I add the css , the table's borders are collapsed into single border.</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/vT9S5.png" alt="enter image description here"></p>
  
  <p>So I think the <code>table { -fs-table-paginate: paginate; }</code> made my table <code>border-collapse:collapse</code> invalid.</p>
  
  <p><strong>So what can I do to fix the bug, make the table's borders collapse?</strong></p>
  
  <p>My app CSS for the table as follows</p>
  
  <pre><code>table{
      border:1px solid #000000;
      border-collapse:collapse;
      -fs-table-paginate: paginate;
  }
  table td{
      border:1px solid #000000;
      word-wrap:break-word;
      white-space:normal;
      overflow:hidden;
      text-align:left;
      line-height:16px;
      height:16px;
  
  }
  table tr{
      page-break-inside:avoid;
  }
  table thead tr th{
      background:#f2f2f2;
      border:1px solid #000000;
      text-align:center;
  }
  
  table tr th{
      background:#f2f2f2;
      border:1px solid #000000;
      text-align:center;
  }
  </code></pre>
  
  <p>And when add <code>-fs-table-paginate: paginate;</code>  sometimes the table header will be not normal. The header will <strong>not be display correctly</strong>. And below  table header will increase a <strong>extra blank line</strong>. As follows:
  <img src="https://i.stack.imgur.com/tIx5G.png" alt="enter image description here"></p>
  
  <p>Anyone has any idea?</p>