web-dev-qa-db-fra.com

Comment distribuer également la largeur des colonnes dans la table HTML lorsque le nombre d'entre eux est inconnu?

Je travaille avec JSF/Icefaces et j'ai besoin de générer une table d'une structure d'arborescence dynamique avec un nombre inconnu (au moment de l'exécution) de lignes et de colonnes. La table doit avoir width: 100%; Donc, il occupe tout l'espace à l'intérieur de son conteneur.

Je suis capable de générer tout le marquage requis pour la table, mais j'ai trouvé que la largeur des cellules n'est pas la même.

Il me serait facile de définir CSS width: (100/numberOfColumns)% Si je savais le nombre d'éléments que je rends. Malheureusement, je ne peux pas modifier les cours retournés par mon haricot de support afin que je puisse seulement itériter sur eux avec le composant ui:repeater.

Savez-vous s'il existe une manière CSS pour vous assurer que toutes les colonnes d'une table ont la même largeur, peu importe ce que c'est?

Je ne voudrais pas utiliser la manière JavaScript. Comme le code plus propre que possible.

htmlcssjsffacelets
22
usr-local-ΕΨΗΕΛΩΝ
table {
    table-layout : fixed;
}
50
Mark Kahn

Si vous avez au moins une idée de maximum Nombre de colonnes: Voici la solution pour appliquer certaines distributions uniquement si une certaine quantité de colonnes est donnée.

Mon exemple ne se concentre que sur le principe et crée des colonnes uniformément distribuées. Notez que c'est superfluide lors de l'utilisation de la disposition de table: fixe et largeur: 100%.

Vous pouvez facilement étendre cette solution pour spécifier la largeur des premières colonnes autres que celle des colonnes restantes.

Dis, le nombre maximum autorisé de colonnes est de 4 (y compris les conduites de ronçons possibles). Étant donné que vous utilisez Tody dans votre table comme dans l'exemple suivant:

<table>
   <thead>
      <tr><th>X</th><th>A</th><th>B</th><th>C</th></tr>
   </thead>
   <tbody>
      <tr><th>1.</th><td>a</td><td>b</td><td>c</td></tr>
      [...]
   </tbody>
</table>

Code CSS:

table{table-layout:fixed;width:100%;}
tbody>tr>*:nth-last-child(2)~*{ width:50%}
tbody>tr>*:nth-last-child(3)~*{ width:33.3%}
tbody>tr>*:nth-last-child(4)~*{ width:25%}

Il est écrit: Appliquer aux frères et sœurs suivants du deuxième dernier élément d'une ligne: largeur 50%. (C'est toutes les colonnes, à l'exception du premier élément, s'il ya au moins 2 colonnes). S'il y a deux, trois, quatre colonnes ou plus, ce sélecteur est appliqué.

Mais alors:

Appliquer aux frères et sœurs suivants du troisième dernier élément d'une ligne: largeur 33,3%: à nouveau: ce sélecteur ne fonctionne que s'il y a au moins trois éléments. Il écrase les règles du sélecteur précédent (Nth-last-enfant (2)), de sorte que vos colonnes ont maintenant la largeur de 33,3%. Ce sélecteur n'est pas appliqué, s'il n'y a que deux colonnes.

Et ensuite: la même chose pour quatre colonnes. Il écrase à nouveau les règles définies précédemment.

Sachez que vous devez définir la largeur de chaque quantité possible de colonnes. Donc, s'il y avait un nombre maximum de 20 colonnes autorisées, il s'agirait de 21 lignes de CSS.

Je crois que cette solution est compatible avec IE9 +, pas IE8. Mais je ne suis pas sûr à 100% sûr. Voir http://caniuse.com/csss-el

9
Thomas Praxl