列计数不影响表

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到每一行上？

来源

2013-05-27 Mooseman

我不认为它应该用于表。你的目标是什么？ –

@dystroy我想要3列''s。 – Mooseman

您可以通过将表格设置为阻止而不是Firefox来使其在Chrome和Opera中运行：http://cssdeck.com/labs/2uqtomam – cimmanon

从w3c

列计数适用于：非替换块级元素（除表元素），表单元格和内联块元件

来源

2013-05-27 19:10:10

-4

繁琐，但它似乎上班。

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

来源

2013-07-13 18:58:34 user287424

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

列计数不影响表

回答

相关问题