Comment puis-je créer un tableau avec des colonnes à largeur fixe et variable à l'aide de calc() ?

Utilisation de calc() avec des tableaux : colonnes à largeur fixe et variable

En essayant de créer un tableau avec une largeur fixe et une largeur variable colonnes de largeur à l'aide de la fonction CSS calc(), vous pouvez rencontrer des problèmes avec les pourcentages (%). Les tables ont des règles spécifiques pour la distribution de l'espace qui rendent calc() incompatible.

Solution Utilisation de table-layout :

Pour résoudre ce problème, définissez l'attribut table-layout sur fixe pour le tableau. Cela force les éléments enfants (td) de la table à respecter les largeurs spécifiées. De plus, définissez l'affichage du tableau sur tableau et fournissez une largeur.

table{
   table-layout:fixed;
   width: 100%;
   display: table;
}

Colonnes basées sur un pourcentage :

Pour les colonnes restantes, utilisez des pourcentages simples au lieu de calc. (). L'espace restant après avoir hébergé les colonnes à largeur fixe sera réparti proportionnellement entre ces colonnes.

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

Remarque :

Pour utiliser cette solution, l'affichage du tableau doit être mis à table, ce qui vous empêche de fixer une hauteur.

Modifié Exemple :

Voici une version modifiée de votre code d'origine :

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