Comment définir la largeur maximale des cellules d'un tableau à l'aide de pourcentages ?

Définition de la largeur maximale pour les cellules du tableau avec des pourcentages

Définir une contrainte de largeur maximale à l'aide de pourcentages pour les cellules du tableau peut être délicat. Prenons l'exemple suivant :

<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

Dans ce cas, le paramètre de largeur maximale ne prend pas effet. Alors, comment pouvons-nous y parvenir en utilisant des pourcentages ?

La solution

La solution consiste à utiliser la propriété table-layout sur l'élément table. En le définissant sur fixe, nous pouvons redimensionner les cellules du tableau proportionnellement :

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

Cette règle CSS garantit que la largeur du tableau occupe tout l'espace disponible et que les cellules du tableau ajustent leur largeur. par conséquent. Les paramètres de pourcentage de largeur maximale pour les cellules individuelles seront désormais respectés.

Exemple :

<table>

En ajoutant table-layout : fixe, la limitation de largeur maximale car la deuxième cellule du tableau est effectivement appliquée, réduisant sa largeur par rapport à la table parent.

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!