Comment répartir équitablement la largeur des colonnes dans la table HTML lorsque le nombre est inconnu?
Je suis en train de travailler avec la JSF/ICEFaces et j'ai besoin de générer une table à partir d'une dynamique de la structure de l'arbre avec une inconnue (au moment de l'exécution) nombre de lignes et de colonnes. La table doit avoir width: 100%;
il occupe tout l'espace à l'intérieur de son conteneur.
Je suis en mesure de générer toutes les balises nécessaires pour la table, mais j'ai trouvé que les cellules d'une largeur n'est pas la même.
Il serait facile pour moi de mettre le CSS width: (100/numberOfColumns)%
si je savais le nombre d'éléments que je suis rendu. Malheureusement, je ne peux pas modifier les classes renvoyé par mon backing bean et je ne peux donc itérer sur eux avec ui:repeater
composant.
Savez-vous si il y a un CSS façon de s'assurer que toutes les colonnes d'une table ont la même largeur, peu importe ce que c'est?
Je ne voudrais pas utiliser le Javascript façon. Tout comme nettoyeur de code que possible.
- Question intéressante. Je pense qu'il n'y a pas de CSS façon de le faire, cependant.
Vous devez vous connecter pour publier un commentaire.
Si vous avez au moins une idée en ce qui concerne la maximum nombre de colonnes: voici la solution pour l'application de certaines distributions, si un certain nombre de colonnes est donné.
Mon exemple se concentre uniquement sur le principe et crée uniformément distribué des colonnes. Notez que c'est superfluide lors de l'utilisation de la table-layout:fixe et width:100%.
Vous pouvez facilement étendre cette solution pour spécifier la largeur de la première colonne autre que celui des colonnes restantes.
Dire, le nombre maximal de colonnes est de 4 (y compris les éventuelles rowheaders). Étant donné que vous êtes en utilisant tbody dans votre tableau comme dans l'exemple suivant:
Code CSS:
Il dit:
Pour les frères et sœurs de l'avant-dernier élément d'une ligne: largeur de 50%. (C'est toutes les colonnes à l'exception du premier élément, s'il y a au moins 2 colonnes). Si il y a deux, trois, quatre ou plusieurs colonnes, ce sélecteur est appliquée.
Mais alors:
Pour les frères et sœurs de la troisième dernier élément d'une ligne: la largeur de 33,3%: Encore une fois: Ce sélecteur ne fonctionne que si il y a au moins trois éléments. Il remplace les règles de la précédente sélecteur (nth-last-child(2)), de sorte que vos colonnes ont maintenant la largeur de 33,3%. Ce sélecteur n'est pas appliqué, s'il y a seulement deux colonnes.
Et puis:
La même pour les quatre colonnes. Nouveau remplace les règles définies précédemment.
Être conscient que vous devez définir la largeur de chaque quantité possible de colonnes. Donc, si il y a un nombre maximum de 20 permis de colonnes, ce serait de 21 lignes de css.
Je crois que cette solution est compatible avec IE9+, pas IE8. Mais je ne suis pas sûr à 100%. Voir http://caniuse.com/css-sel3