css - 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

来自w3c

列数适用于：不可替换的块级元素（表格元素除外）、表格单元格和行内块元素

Answer 2

很麻烦，但它似乎工作。

<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>