Pourquoi « overflow : caché » ne fonctionne-t-il pas dans une cellule de tableau et comment puis-je y remédier ?

Pourquoi le débordement ne fonctionne pas dans une cellule de tableau

En tentant de restreindre la largeur d'une cellule de tableau, le débordement : la propriété masquée ne parvient souvent pas à empêcher le tableau de se développer avec des chaînes de texte non espacées. Ce problème peut être résolu en implémentant une combinaison de propriétés CSS sur les éléments du tableau et des cellules du tableau.

Solution :

Pour couper le texte au bord de la cellule du tableau, plutôt que de la développer, appliquez les propriétés suivantes :

• Tableau Élément :

  • mise en page du tableau : fixe

• Élément de cellule de tableau :

  • débordement : caché
  • espace blanc : nowrap

Exemple :

Vous trouverez ci-dessous un exemple mis à jour qui démontre l'utilisation correcte de ces propriétés :

 box-sizing : border-box;<br>><br>table {<br> table-layout : corrigé ;<br> border-collapse : réduire; <br> largeur : 200px ;<br>}<br>td {<br> arrière-plan : < /pre><br><pre class="brush:php;toolbar:false"> <tbody><br><br><br></tbody><br></table>

<tr>
  <td>
    This_is_a_terrible_example_of_thinking_outside_the_box.
  </td>
</tr>

Supplémentaire Considérations :


Notez que la largeur de l'élément de tableau doit être spécifiée explicitement pour garantir qu'elle est égale ou inférieure aux cellules à largeur fixe.

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!