nombre de colonnes non affecté table

La propriété column-count n'affecte pas la table.
HTML:nombre de colonnes non affecté table

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

Mise à jour:
Si column-count est pas une bonne option à utiliser sur un <table>, est là une meilleure façon de bouger 3 <tr> s sur chaque ligne?

Source

2013-05-27 Mooseman

Je ne pense pas qu'il devrait être utilisé pour les tables. Quel est votre objectif ici? –

@dystroy Je veux 3 colonnes de '' s. – Mooseman

Vous pouvez le faire fonctionner dans Chrome et Opera en définissant le tableau à bloquer, mais pas Firefox: http://cssdeck.com/labs/2uqtomam – cimmanon

De w3c

Nombre de colonnes applique à: éléments de type bloc non remplacés (à l'exception des éléments de table), les cellules de table et éléments inline-block

Source

2013-05-27 19:10:10

-4

Lourdeur, mais il semble travailler.

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

Source

2013-07-13 18:58:34 user287424

Si je dois avoir plusieurs éléments de table, j'utiliserais des éléments span ou div à la place. – Mooseman

nombre de colonnes non affecté table

Répondre

Questions connexes