Comment forcer le contenu de la cellule du tableau <td> à envelopper?

146

Voici la page entière * wrappable est définie dans un fichier main.css

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

Voici la page entière:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

Cela s'étire à chaque fois que je me soumets.
Cette page est également dans un div. Dois-je définir la largeur du div et du tableau également?

html css html-table

— Doc vacances
source

1

Où définissez-vous wrappable?

— canon du

2

Où la .wrappableclasse est -elle définie? Quel navigateur utilisez-vous?

— Dani le

Le navigateur utilisé est particulièrement important - les anciennes versions d'IE ne prennent pas en charge max-width. Il y a beaucoup d'autres choses qui pourraient être le problème et il est impossible de dire sans plus d'informations, mais c'est une chose qui peut être cassée.

— Chris Morgan du

J'essaye simplement de garder le texte soumis pour rester dans une largeur et de ne pas étirer le tableau après l'avoir sybmit

— Doc Holiday

Cela pourrait aider stackoverflow.com/a/26560829/1924979

— Harsh Vakharia

292

Utiliser table-layout:fixeddans le tableau et word-wrap:break-worddans le td.

Voir cet exemple:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <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>
</body>
</html>

DÉMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

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

Développer l'extrait

— jim31415
source

Vous devez ajouter le bit border-collapse: collapse à la partie supérieure de votre réponse afin que les personnes qui analysent visuellement votre réponse puissent obtenir rapidement la réponse complète.

— dwoodwardgb

pour un peu plus de modifications table {border-collapse: collapse; table-layout: fixe; word-wrap: break-word;} table td {width: 100px; word-wrap: break-word;}

— Kuldeep Kumar

44

Cela fonctionne pour moi.

<style type="text/css">

 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

Et l'attribut de table est:

table { 
  table-layout: fixed;
  width: 100%
}

— Lavekush Agrawal
source

15

td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

— Jafstar
source

6

peut-être que vous pouvez expliquer le code pour qu'il soit clair pour tout le monde

— Federico

il montre une table soignée, mais le contenu est coupé; c'est à dire. ne peut pas voir certains mots si son gros contenu. overflow:hidden

— wpcoder

Le codage en dur de la largeur maximale n'est cependant pas bon. Il ne s'adapte pas non plus aux grandes résolutions, etc. Vous voulez permettre à la table de répondre correctement à la taille.

— user959690

4

Si vous utilisez un tableau réactif Bootstrap, vous voulez simplement définir la largeur maximale pour une colonne particulière et faire un habillage du texte, en faisant le style de cette colonne comme suit fonctionne également

max-width:someValue;
word-wrap:break-word

— Feng Han
source

5

Notez que cela max-widthdoit être une pxvaleur, pas%

— maxedison

3

Cela a fonctionné pour moi lorsque je devais afficher "joli" JSON dans une cellule:

td { white-space:pre }

En savoir plus sur la `white-space`propriété :

normal : Cette valeur demande aux agents utilisateurs de réduire les séquences d'espaces blancs et de couper les lignes si nécessaire pour remplir les zones de ligne.

pre: Cette valeur empêche les agents utilisateurs de réduire les séquences d'espaces blancs.
Les lignes ne sont interrompues qu'au niveau des caractères de nouvelle ligne conservés.

nowrap: Cette valeur réduit les espaces blancs comme pour normal, mais supprime les sauts de ligne dans le texte.

pre-wrap: Cette valeur empêche les agents utilisateurs de réduire les séquences d'espaces blancs.
Les lignes sont interrompues au niveau des caractères de nouvelle ligne conservés et, si nécessaire, pour remplir les zones de ligne.

pre-line: Cette valeur demande aux agents utilisateurs de réduire les séquences d'espaces blancs.
Les lignes sont interrompues au niveau des caractères de nouvelle ligne conservés et, si nécessaire, pour remplir les zones de ligne.

(En savoir plus à la source .)

— ashleedawg
source

1

Ajoutez simplement: word-break: break-word; à votre classe de table.

— Sajjad Aljileezi
source

0

Si vous voulez corriger la colonne, vous devez définir la largeur. Par exemple:

<td style="width:100px;">some data</td>

— Eugène
source

1

J'ai essayé ça ... ça continue d'étendre le tableau pour une raison quelconque <td id = "comments - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >

— Doc Holiday

0

C'est une autre façon de résoudre le problème si vous avez de longues chaînes (comme les noms de chemin de fichier) et que vous ne voulez casser les chaînes que sur certains caractères (comme les barres obliques). Vous pouvez insérer des caractères d'espace de largeur zéro Unicode juste avant (ou après) les barres obliques dans le HTML.

— Mark Lakata
source

0

.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

J'ai testé avec les données binaires et cela fonctionne parfaitement ici.

— jaip
source

Comment forcer le contenu de la cellule du tableau <td> à envelopper?

DÉMO:

En savoir plus sur la white-spacepropriété :

En savoir plus sur la `white-space`propriété :