Maison > interface Web > tutoriel CSS > Comment faire en sorte que le contenu des cellules d'un tableau soit renvoyé en HTML ?

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
796 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

  1. 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.
  2. 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.
  3. 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal