Maison > interface Web > tutoriel CSS > Comment définir la largeur maximale des cellules d'un tableau à l'aide de pourcentages ?

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

Patricia Arquette
Libérer: 2024-11-13 01:58:02
original
650 Les gens l'ont consulté

How to Set Max-Width for Table Cells Using Percentages?

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>
Copier après la connexion

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;
}
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal