列数不影响表答案

【问题标题】：column-count not affecting table列数不影响表
【发布时间】：2013-05-27 19:02:42
【问题描述】：

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

小提琴：http://jsfiddle.net/8rydn/

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

【问题讨论】：

我认为它不应该用于表格。你在这里的目标是什么？
@dystroy 我想要 3 列 <tr>s。
您可以通过将表格设置为阻止而不是 Firefox 来使其在 Chrome 和 Opera 中工作：cssdeck.com/labs/2uqtomam
您找到合适的解决方案了吗？

标签： css multiple-columns column-count

【解决方案1】：

来自w3c

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

【讨论】：

【解决方案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>

【讨论】：

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