Comment faire en sorte que le contenu des cellules d'un tableau soit renvoyé en HTML ?-tutoriel CSS-php.cn

Comment faire en sorte que le contenu des cellules d'un tableau soit renvoyé en HTML ?

DDD

Libérer： 2024-10-27 08:57:03

original

517 Les gens l'ont consulté

How to Make Table Cell Content Wrap in HTML?

Comment forcer une cellule de tableau Contenu à envelopper

Dans le code fourni, le texte dans le champ les éléments s’étirent lorsqu’ils sont soumis. Pour résoudre ce problème et garantir que le texte soit renvoyé à la ligne dans les cellules, les étapes suivantes peuvent être suivies :

Solution

Mise en page du tableau :
Ajouter un tableau -layout :fixé à la élément. Cet attribut spécifie que le tableau aura une disposition fixe, forçant ses colonnes à avoir les largeurs spécifiées.

Word Wrap :
Ajouter word-wrap:break-word au < ;td> éléments. Cette propriété permet le retour à la ligne des mots dans les cellules du tableau, permettant ainsi au texte long de se diviser en plusieurs lignes.

Exemple

<html><br><head> <br> <style><br> table {border-collapse:collapse; disposition de la table : fixe ; width:310px;}<br> table td {border:solid 1px #fab; largeur : 100 px ; word-wrap:break-word;}<br> </style><br></head></p>
<p><body><br> <table></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">  <tr>
     <td>1</td>
     <td>Lorem Ipsum</td>
     <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
  </tr>
  <tr>
     <td>2</td>
     <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
     <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
  </tr>
  <tr>
     <td>3</td>
     <td></td>
     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
  </tr>

Copier après la connexion

DÉMO :

table {border-collapse:collapse; disposition de la table : fixe ; width:310px;}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

Copier après la connexion

       <table></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>

Copier après la connexion

”

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!