Comment forcer le contenu de la cellule de tableau <td> à s'enrouler ?

Question

Comment forcer le contenu de la cellule de tableau <td> à s'enrouler ?

Demandé el 12 de Juillet, 2011: Quand la question a-t-elle été
72587 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Voici la page entière * wrappable est défini 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>

Ça s'étire à chaque fois que je soumets.
Cette page se trouve également dans un div. Dois-je également définir la largeur de la division et du tableau ?

Demandé el 12 de Juillet, 2011 par Doc Holiday

1 votes

Où êtes-vous en train de définir wrappable ?

Commenté el 12 de Juillet, 2011 par canon

2 votes

Où se trouve .wrappable classe définie ? quel navigateur utilisez-vous ?

Commenté el 12 de Juillet, 2011 par Dani

0 votes

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

Commenté el 12 de Juillet, 2011 par Chris Morgan

Afficher 2 autres commentaires

Answer 1

5 Réponses

Answer 2

318voto

jim31415 Points 2884

Utilisez table-layout:fixed dans le tableau et word-wrap:break-word dans 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>

DEMO :

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>

Répondu el 12 de Juillet, 2011 par jim31415 (2884 Points )

0 votes

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

Commenté el 16 de Octobre, 2017 par dwoodwardgb

0 votes

Pour quelques modifications supplémentaires table {border-collapse:collapse ; table-layout:fixed;word-wrap:break-word;} table td { width:100px ; word-wrap:break-word;}

Commenté el 13 de Mars, 2020 par kuldeep kumar

Answer 3

53voto

Lavekush Agrawal Points 1754

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 la table est :

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

Répondu el 20 de Mai, 2014 par Lavekush Agrawal (1754 Points )

Answer 4

22voto

Jafstar Points 179

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

Répondu el 12 de Décembre, 2014 par Jafstar (179 Points )

Answer 5

8voto

ashleedawg Points 12302

Cela a fonctionné pour moi lorsque j'ai eu besoin d'afficher un "joli" JSON dans une cellule :

td { white-space:pre }

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

normal : Cette valeur indique aux agents utilisateurs de réduire les séquences d'espace blanc, et de rompre les lignes si nécessaire pour remplir les cases de ligne.

pre : Cette valeur empêche les agents utilisateurs de regrouper les séquences d'espaces blancs.
Les lignes ne sont coupées qu'aux caractères de nouvelle ligne préservés.

nowrap : Cette valeur réduit l'espace blanc comme pour normal mais supprime les sauts de ligne dans le texte.

pre-wrap : Cette valeur empêche les agents utilisateurs de regrouper les séquences d'espaces blancs.
Les lignes sont coupées aux caractères de nouvelle ligne préservés, et si nécessaire pour remplir les cases de ligne.

pre-line : Cette valeur indique aux agents utilisateurs de réduire les séquences d'espaces blancs.
Les lignes sont coupées aux caractères de nouvelle ligne préservés, et si nécessaire pour remplir les cases de ligne.

(Pour en savoir plus, consultez le site source .)

Répondu el 15 de Février, 2019 par ashleedawg (12302 Points )

Answer 6

4voto

Feng Han Points 171

Si vous utilisez le tableau réactif de Bootstrap et que vous souhaitez simplement définir la largeur maximale d'une colonne particulière et faire un habillage de texte, le style de cette colonne peut également être modifié comme suit

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

Répondu el 19 de Septembre, 2016 par Feng Han (171 Points )

Comment forcer le contenu de la cellule de tableau <td> à s'enrouler ?

Réponses

DEMO :

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

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment forcer le contenu de la cellule de tableau <td> à s'enrouler ?

Réponses

DEMO :

En savoir plus sur le white-space propriété :

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

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