CODEWITHSUNDEEP
cssmultiple-columnscolumn-count
Mooseman
Mooseman

Reputation: 18891

column-count not affecting table

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?

Upvotes: 3

Views: 6508

Answers (2)

user287424
user287424

Reputation: 1249

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>

Upvotes: -3

Mr. Alien
Mr. Alien

Reputation: 157324

From w3c

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

Upvotes: 6

Related Questions