Comment faire en sorte que les cellules d'un tableau enveloppent le contenu en HTML ?

Résolution du problème d'habillage des cellules du tableau

En HTML, les cellules du tableau () n'enveloppent généralement pas leur contenu par défaut. Pour les forcer à être renvoyés à la ligne, nous devons modifier les styles CSS.

Solution :

Pour garantir que le contenu des cellules du tableau soit renvoyé à la ligne, ajoutez les styles suivants :

• CSS pour le tableau : Définir la disposition du tableau : corrigé ; sur l'élément du tableau pour définir la largeur des colonnes et empêcher le contenu de s'étirer.
• CSS pour les cellules du tableau : Appliquer le retour à la ligne : break-word ; pour briser les mots longs dans les cellules.

Exemple de code :

<code class="css">table {
  border-collapse: collapse;
  table-layout: fixed;
  width: <table_width>;
}

table td {
  border: 1px solid #ccc;
  width: <td_width>;
  word-wrap: break-word;
}</code>

Exemple HTML :

<code class="html"><table>
  <tr>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
    <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</td>
  </tr>
</table></code>

En appliquant ces règles CSS, les cellules du tableau envelopperont leur contenu et éviteront de s'étirer. De plus, la définition des largeurs du tableau et des cellules garantit que le contenu s'inscrit dans les dimensions définies.

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!