列数不影响表格的问题

Question

column-count 属性不影响表格。
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/

更新：
如果在<table>中使用column-count不是一个好的选择，那么有没有更好的方法将3个<tr>移动到每行上？

- Mooseman

---

我认为它不应该用于表格。你的目标是什么？ - Denys Séguret

@dystroy 我想要3列<tr>。 - Mooseman

你可以将表格设置为块状以在Chrome和Opera中使其正常工作，但是在Firefox中不行：http://cssdeck.com/labs/2uqtomam - cimmanon

您是否找到了合适的解决方案？ - DanTheMan

Answer 1

来源：w3c

列数适用于：非替换块级元素（除表格元素外）、表格单元格和内联块级元素。

（说明：本文介绍了CSS3多列布局中的“列数”属性，该属性适用于上述元素）

- Mr. Alien

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>

- user287424

---

如果我要有多个表格元素，我会使用span或div元素。 - Mooseman