Comment empêcher l'expansion de la largeur des colonnes dans les tableaux HTML ?

Empêcher l'expansion de la largeur des colonnes dans les tableaux

De nombreux développeurs sont souvent confrontés à un défi lorsqu'ils travaillent avec des tableaux : s'assurer que la largeur d'une colonne reste constante , quelle que soit la longueur du texte dans ses cellules. Dans cet article, nous aborderons ce problème et proposerons une solution pour définir la largeur des colonnes tout en désactivant toute extension.

Comprendre le problème

Par défaut, lorsque le texte dépasse la largeur spécifiée d'une cellule du tableau, la colonne contenant s'agrandit pour s'adapter au débordement. Ce comportement contredit la cohérence souhaitée dans les largeurs de colonnes.

Solution : Stabilité de la largeur des colonnes

Il existe deux propriétés CSS cruciales pour résoudre ce problème :

• table-layout: fixed : Cette propriété définit le mode de disposition du tableau sur fixe, garantissant que les largeurs de colonnes restent cohérentes quelle que soit la cellule. content.
• width : Cette propriété définit la largeur explicite de la colonne.

L'implémentation de ces propriétés, ainsi que le style CSS approprié pour les bordures et la largeur du tableau, atteint l'objectif prévu comportement :

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

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

Exemple :

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

Ce code maintient une largeur de colonne de 100 px pour les deux colonnes, même lorsque le texte de la deuxième cellule d'en-tête est beaucoup plus longtemps. La propriété overflow: Hidden masque tout texte en excès qui dépasserait autrement au-delà des limites de la cellule.

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!