Pourquoi les points de suspension n'apparaissent-ils pas dans les cellules de mon tableau ?

Les points de suspension n'apparaissent pas dans les cellules du tableau

Dans le tableau HTML donné, des points de suspension devraient normalement apparaître lorsque le texte dans une cellule dépasse sa valeur définie largeur. Cependant, le texte de l'exemple fourni n'est pas tronqué comme prévu.

Enquête sur le problème

Lors de l'inspection de la sortie, la largeur de cellule est de 139 pixels, ce qui indique que le contenu doit être plus large que les 50 pixels spécifiés. En examinant les styles CSS, nous remarquons les paramètres suivants :

<code class="css">td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

Toutes les propriétés nécessaires aux points de suspension semblent être présentes. Alors pourquoi ça ne marche pas ?

Solution 1 : Afficher : Bloc

Une solution consiste à ajouter la propriété suivante au CSS :

<code class="css">td {
  display: block;
}</code>

Cela définit explicitement le type d'affichage des cellules du tableau au niveau du bloc, les faisant se comporter comme des conteneurs indépendants et activant les points de suspension.

Solution 2 : disposition et largeur du tableau

Une autre approche consiste à définir la disposition de la table : fixe ; pour le tableau, ainsi que la définition d'une largeur :

<code class="css">table {
  table-layout: fixed;
  width: 200px;
}</code>

Cela force le tableau à avoir une disposition fixe et définit explicitement sa largeur, évitant ainsi le problème où la largeur du contenu peut affecter les calculs de largeur de 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!