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

Comment définir la largeur maximale des cellules d'un tableau avec des pourcentages ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-12 14:31:02961parcourir

How to Set the Maximum Width of Table Cells with Percentages?

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

Dans la poursuite de l'optimisation de la disposition des tableaux, des questions se posent concernant la manipulation des cellules individuelles du tableau . L'une de ces questions concerne la définition de la largeur maximale d'une cellule de tableau à l'aide de pourcentages. Malgré les efforts, des tentatives telles que l'exemple fourni échouent souvent à obtenir l'effet souhaité.

La solution à ce défi réside dans la propriété CSS table-layout:fixed. En appliquant cette propriété à la table en question, la propriété max-width suivante prendra effet comme prévu.

Code CSS :

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

Mise à jour HTML :

<table class="fixed-table">
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

Feuille de style CSS :

.fixed-table td {
  max-width: 67%;
}

En utilisant cette combinaison de propriétés et d'attributs CSS, vous pouvez désormais définir la largeur maximale de n'importe quelle cellule du tableau en utilisant des pourcentages, garantissant une disposition du tableau plus raffinée et plus réactive.

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!

Déclaration:
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