web-dev-qa-db-fra.com

Comment forcer le contenu de la cellule de tableau <td> à se terminer?

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;
}

Heres 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 soumets.
Cette page est aussi dans une div. Dois-je définir la largeur de la div et du tableau également?

htmlcsshtml-table
133
Doc Holiday

Utilisez table-layout:fixed dans la table 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>

254
jim31415

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

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

40
Lavekush Agrawal
td {
overflow: hidden;
max-width: 400px;
Word-wrap: break-Word;
}
11
Jafstar

Si vous utilisez le tableau réactif Bootstrap, vous souhaitez simplement définir la largeur maximale d’une colonne donnée et effectuer un sautage de texte.

max-width:someValue;
Word-wrap:break-Word
4
Feng Han

C'est une autre façon de résoudre le problème si vous avez de longues chaînes (comme les noms de chemins de fichiers) et que vous voulez uniquement les casser sur certains caractères (comme des barres obliques). Vous pouvez insérer Unicode Zero Width Space caractères juste avant (ou après) les barres obliques dans le code HTML.

0
Mark Lakata

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

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

0
Evgeniy

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

0
Sajjad Aljileezi

Cela fonctionnait pour moi lorsque je devais afficher de "jolies" JSON dans une cellule:

td { white-space:pre }

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

  • normal: cette valeur demande aux agents utilisateurs de réduire les séquences d'espaces, et de séparer les lignes si nécessaire pour remplir les zones. 

  • pre: Cette valeur empêche les agents utilisateurs de réduire les séquences d'espaces.
    Les lignes ne sont rompues que pour les 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 réduire les séquences d'espaces.
    Les lignes sont interrompues au niveau des caractères de nouvelle ligne préservés et, au besoin, pour remplir les zones de ligne. 

  • pre-line: cette valeur demande aux agents utilisateurs de réduire les séquences d'espaces.
    Les lignes sont interrompues au niveau des caractères de nouvelle ligne préservés et, au besoin, pour remplir les zones de ligne. 

(Voir aussi plus sur source .)

0
ashleedawg
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      Word-wrap: break-Word; 
}

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

0
jaip