title: Forcing column breaks in CSS3 multi-column, when using html tables
body: <p>I have multi-column layouts working, and now want to have it working with an html table (see <a href="http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/" rel="nofollow">http://lucas.ucs.ed.ac.uk/tutorials/CSS3_columns/</a>) however there is just one wee flaw: where the table is cut for the next column, the cut can be mid-row... and it looks horrible.</p>
  
  <p>When I had a page that was just a series of &lt;p&gt; elements, I used a simple <code>style="display: inline-block;"</code> trick to keep the contents of the paragraph together, forcing the column-breaks to be between paragraphs.</p>
  
  <p>Unsurprisingly, this isn't working with tables.</p>
  
  <p>I've tried putting the content of each &lt;td&gt; into a div, and applying the <code>inline-block;"</code> style; I've tried applying </p>
  
  <pre><code>{
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -moz-page-break-inside: avoid;
    page-break-inside: avoid; 
  }
  </code></pre>
  
  <p>to &lt;tr&gt;s and to &lt;td&gt;s - with no joy.</p>
  
  <p>Has anyone some suggestions for getting an HTML table to break into whole rows, when using CSS3 multi-columns </p>