Comment empêcher l'expansion des cellules d'un tableau en raison d'un texte long ?

Comment empêcher l'expansion des cellules d'un tableau malgré la longueur du texte

Dans une disposition de tableau typique, la largeur d'une colonne s'ajuste pour s'adapter à la longueur de sa cellule la plus longue. Cependant, si vous souhaitez une largeur de colonne fixe quel que soit le texte dans ses cellules, suivez ces étapes :

Solution :

1. Définissez la largeur des cellules à l'aide de CSS : Spécifiez la largeur (par exemple, 100 px) pour les éléments th et td dans la définition du tableau.
2. Définissez la disposition de la table sur fixe : Cette propriété garantit que la largeur de la table reste constante, ce qui décourage l'expansion des colonnes. Pour contrôler entièrement les dimensions du tableau, définissez une largeur pour le tableau lui-même (par exemple, largeur : 200 px).
3. Activer le découpage du texte (facultatif) : pour empêcher le texte de déborder en dehors de la cellule, ajoutez overflow : masqué au champ cellule définitions.

Exemple :

table {
  table-layout: fixed;
  width: 200px;
}

th,
td {
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

En adhérant à ces étapes, vous pouvez vous assurer que les largeurs des colonnes du tableau restent fixes, quelle que soit la longueur du texte dans ses cellules. Cette approche vous accorde un meilleur contrôle sur la présentation des tableaux et empêche l'expansion indésirable des colonnes qui pourrait perturber votre mise en page.

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!