Comment puis-je obtenir un tableau réactif avec des cellules à largeur fixe et des cellules à largeur variable à l'aide de CSS calc() ?

Tableaux de style avec calc() et cellules à largeur fixe

Dans le développement Web, les tableaux sont souvent utilisés pour organiser les données, mais cela peut Il peut être difficile de définir des largeurs spécifiques pour les colonnes tout en conservant la flexibilité des cellules à contenu variable. C'est là que la fonction CSS calc() peut s'avérer utile.

Considérez le scénario dans lequel vous voulez un tableau avec des cellules à largeur fixe pour des colonnes spécifiques, telles que la première et la dernière colonne, mais vous voulez également le les cellules restantes doivent avoir une largeur variable et s'adapter à leur contenu. À l'aide de calc(), vous pouvez spécifier la largeur de ces cellules à largeur variable en pourcentage de l'espace restant dans le tableau.

Cependant, dans l'extrait de code fourni, vous pouvez rencontrer des difficultés en utilisant calc() dans un tableau. En effet, les tableaux ont des règles spécifiques pour répartir l'espace entre les colonnes, en donnant la priorité au contenu des cellules.

Pour résoudre ce problème et obtenir la disposition souhaitée, vous pouvez utiliser l'approche suivante :

1. Définir la disposition de la table : corrigé ; sur la table : Cela force les éléments td enfants de la table à adhérer aux largeurs que vous spécifiez, garantissant ainsi que les cellules à largeur fixe restent à leurs dimensions spécifiées.
2. Assurez-vous que la table a une largeur fixe width (100% dans ce cas) : Une largeur définie est cruciale pour la mise en page du tableau : fixe ; pour fonctionner correctement.
3. Utilisez des pourcentages pour les colonnes restantes : Après avoir pris en compte les colonnes à largeur fixe, vous pouvez attribuer des largeurs relatives aux colonnes restantes à l'aide de pourcentages. Par exemple, si vous souhaitez que ces colonnes occupent 40 %, 40 % et 20 % de l'espace restant, vous définirez leurs largeurs sur 40 %, 40 % et 20 %, respectivement.

En suivant ces étapes, vous pouvez profiter de calc() pour obtenir un tableau avec des cellules à largeur fixe et des cellules à largeur variable qui se comportent comme prévu, en s'adaptant à leur contenu tout en garantissant l'intégrité des colonnes à largeur fixe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!