column-count not affecting table

Question

The column-count property doesn't affect the table.
HTML:

<table>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
    <tr><td>Key</td><td>Value</td></tr>
</table>

CSS:

table{
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari and Chrome */
    column-count: 3;
}
td{
    border:2px #000 solid;
}

Fiddle: http://jsfiddle.net/8rydn/

Update:
If column-count is not a good option to use on a <table>, is there a better way to move 3 <tr>s onto each line?

Answer 1

From w3c

Column Count Applies to: non-replaced block-level elements (except table elements), table cells, and inline-block elements

Answer 2

Cumbersome, but it seems to work.

<div style="-moz-column-count: 3; -webkit-column-count: 3; column-count: 3}">
  <table><tr><td style="width: 150px">key</td><td>value</td></tr></table>
  <table><tr><td style="width: 150px">key</td><td>value</td></tr></table>
  <table><tr><td style="width: 150px">key</td><td>value</td></tr></table>
  <table><tr><td style="width: 150px">key</td><td>value</td></tr></table>
</div>