title: Split HTML table across multiple layout columns (in Firefox)
body: <p>This is a problem that mostly seems to apply to Firefox. I have a two column layout in HTML using the following CSS Styles:</p>
  
  <pre><code>div.column-container {
     -webkit-column-count: 2;
     -webkit-column-gap: 10px;
     -moz-column-count: 2;
     -moz-column-gap: 10px;
     column-count: 2;
     column-gap: 10px;
  }
  </code></pre>
  
  <p>This works great for text and general content, but I have a large table that I would like to have split across both columns and as it seems right now, the table just goes into one or the other column.</p>
  
  <p>I tried various approaches such as </p>
  
  <pre><code>div.column-container tr {
     page-break-after: auto;
     page-break-before: auto;
  } 
  </code></pre>
  
  <p>but this did not seem to help.</p>
  
  <p>Here is a fiddle illustrating the situation: <a href="http://jsfiddle.net/hq2uukm5/1/" rel="nofollow">http://jsfiddle.net/hq2uukm5/1/</a></p>
  
  <p>Does anyone have any idea how a table can be broken across multiple columns?</p>