Comment utiliser les pourcentages pour les colonnes à largeur variable dans les tableaux avec des colonnes à largeur fixe ?

Utiliser calc() avec des tableaux : une solution alternative

Lorsque vous essayez d'implémenter des colonnes de tableau à largeur fixe et à largeur variable à l'aide de la fonction calc(), on peut rencontrer des limites. Dans les tableaux, la fonction calc() ne prend pas en charge les pourcentages pour les calculs de largeur.

Pour surmonter ce défi, envisagez d'adopter une approche différente :

1. Définissez la disposition du tableau attribut : Forcez les colonnes à adhérer à des largeurs spécifiques en définissant la propriété table-layout sur "fixe" pour la table. De plus, attribuez une largeur de 100 % au tableau.
2. Supprimez calc() et utilisez des pourcentages : Au lieu de calc(), utilisez des pourcentages simples pour les colonnes restantes. Déterminez les colonnes à largeur fixe et attribuez leurs largeurs. L'espace restant sera réparti proportionnellement entre les colonnes de largeur relative.

Exemple CSS :

td.title, td.interpret {
    width: 40%;
}

td.album {
    width: 20%;
}

Points clés :

• Régler la disposition du tableau sur "fixe" garantit que les largeurs de colonnes respectent les valeurs spécifiées. valeurs.
• L'utilisation de pourcentages pour les colonnes de largeur relative permet de répartir l'espace restant proportionnellement.
• Display:table est requis pour que la disposition du tableau fonctionne, mais cela empêche l'utilisation de la hauteur pour le tableau.

Exemple de code modifié :

<table border="0">

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!