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>
移动到每行上?
<tr>
。 - Mooseman