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?

I don't think it should be used for tables. What's your goal here ? — Denys Séguret, May 27 '13 at 19:04
You can get it to work in Chrome and Opera by setting the table to block, but not Firefox: http://cssdeck.com/labs/2uqtomam — cimmanon, May 27 '13 at 19:27

score 5 · Accepted Answer · answered May 27 '13 at 19:10

5

From w3c

Column Count Applies to: non-replaced block-level elements (except table elements), table cells, and inline-block elements

answered May 27 '13 at 19:10

Mr. Alien

153,751
34
298
278

score -3 · Answer 2 · answered Jul 13 '13 at 18:58

-3

Cumbersome, but it seems to work.

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

answered Jul 13 '13 at 18:58

user287424

1,219
12
22

If I'm going to have multiple table elements, I would use span or div elements instead. – Mooseman Jul 14 '13 at 20:07

column-count not affecting table

2 Answers2