Comment obtenir des largeurs de colonnes flexibles dans les tableaux à l'aide de CSS Calc() et de Table-Layout ?

Largeurs de colonnes flexibles dans les tableaux avec CSS Calc

Dans la recherche d'un tableau avec des colonnes à largeur fixe et à largeur flexible, en utilisant La fonction CSS calc() seule peut échouer. Les tableaux appliquent des règles spécifiques pour la répartition de l'espace en fonction du contenu des cellules, ce qui rend difficile pour calc() de répartir uniformément l'espace disponible.

Pour surmonter cet obstacle, nous pouvons utiliser l'attribut table-layout défini sur fixe pour le élément de tableau. Cela garantit que les éléments enfants td adhèrent aux largeurs que nous définissons. De plus, une largeur (par exemple, 100 %) doit être spécifiée pour le tableau.

Pour que la mise en page du tableau prenne effet, le tableau doit également avoir un type d'affichage de tableau. Il s'agit du paramètre par défaut et il est généralement omis. Cependant, il est inclus ici par souci d'exhaustivité.

Désormais, nous pouvons librement utiliser des pourcentages pour ajuster la largeur des colonnes restantes. Par exemple :

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

td.album {
  width: 20%;
}

L'espace restant après avoir pris en compte les colonnes à largeur fixe est réparti entre les colonnes de largeur relative.

Une mise en garde à noter est que l'utilisation de display: table pour la table signifie que nous ne pouvons plus définir de hauteur (ou de hauteur minimale ou de hauteur maximale) pour la table.

Vous trouverez ci-dessous l'exemple modifié intégrant ces correctifs :

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