Comment puis-je empêcher le débordement de texte d'augmenter la largeur des colonnes du tableau HTML ?

Contrôler la largeur des colonnes du tableau malgré le débordement de texte

De nombreux développeurs sont confrontés au problème de l'expansion de la largeur des colonnes dans les tableaux HTML lorsqu'ils traitent des cellules de texte débordantes. Pour résoudre ce problème, il est crucial de maintenir une largeur de colonne cohérente quelle que soit la longueur du contenu des cellules.

Pour surmonter ce défi, l'approche suivante est recommandée :

1. Spécifier la colonne Largeur : Utilisez CSS pour spécifier la largeur souhaitée pour chaque cellule de colonne à l'aide de la propriété "width".
2. Fixer le tableau Mise en page : Définissez la propriété "table-layout" sur "fixe" pour la table. Cela empêche les cellules individuelles de remplacer les largeurs spécifiées.
3. Désactiver l'expansion des cellules : Définissez la propriété "overflow" sur "caché" pour l'en-tête ("th") et les données ("td". ) cellules. Cela garantit que tout texte en excès reste dans la cellule au lieu d'augmenter la largeur de la colonne.

Voici un exemple de code CSS qui intègre ces recommandations :

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

Avec ces paramètres , les largeurs de colonnes restent fixes à 100 px, même lorsque les cellules de texte contiennent un contenu excessif. Vous pouvez améliorer encore l'apparence en ajustant les bordures et les tailles via CSS.

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!