159

Heres the entire page * wrappable is defined in a main.css file

/* 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 the entire page:

<%@ 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>

It just stretches every time I submit.
This page is within a div also. Do I need to set the width of the div and the table also?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Doc Holiday
  • 9,928
  • 32
  • 98
  • 151

11 Answers11

319

Use table-layout:fixed in the table and word-wrap:break-word in the td.

See this example:

<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>
Ehsan Sajjad
  • 61,834
  • 16
  • 105
  • 160
jim31415
  • 8,588
  • 6
  • 43
  • 64
  • You should add the border-collapse:collapse bit to the top part of your answer so people who are visually scanning your answer can get the full answer quickly. – dwoodwardgb Oct 16 '17 at 20:16
  • for little more modifications table {border-collapse:collapse; table-layout:fixed;word-wrap:break-word;} table td { width:100px; word-wrap:break-word;} – Kuldeep Kumar Mar 13 '20 at 08:34
53

Its works for me.

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

}

And table attribute is:

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

Lavekush Agrawal
  • 6,040
  • 7
  • 52
  • 85
22
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
Jafstar
  • 229
  • 2
  • 2
  • 7
    maybe you can explain the code so it will be clear for anyone – Federico Dec 12 '14 at 19:43
  • 1
    it shows neat table, but content is cut; ie. can't see some words if its big content. `overflow:hidden` – wpcoder Nov 01 '17 at 21:48
  • 1
    Hardcoding the max width isn't good though. It won't scale as well to large resolutions, etc. YOu want to allow the table to respond to size correctly. – user959690 Dec 10 '18 at 22:31
8

This worked for me when I needed to display "pretty" JSON in a cell:

td { white-space:pre }

More about the white-space property:

  • normal : This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

  • pre : This value prevents user agents from collapsing sequences of white space.
    Lines are only broken at preserved newline characters.

  • nowrap : This value collapses white space as for normal, but suppresses line breaks within text.

  • pre-wrap : This value prevents user agents from collapsing sequences of white space.
    Lines are broken at preserved newline characters, and as necessary to fill line boxes.

  • pre-line : This value directs user agents to collapse sequences of white space.
    Lines are broken at preserved newline characters, and as necessary to fill line boxes.

(Also, see more at the source.)

ashleedawg
  • 20,365
  • 9
  • 72
  • 105
4

If you are using Bootstrap responsive table, just want to set the maximum width for one particular column and make text wrapping, making the the style of this column as following also works

max-width:someValue;
word-wrap:break-word
Feng Han
  • 361
  • 2
  • 7
3

Just add: word-break: break-word; to you table class.

Marwen Doukh
  • 1,946
  • 17
  • 26
Sajjad Aljileezi
  • 734
  • 7
  • 9
3

I solve it putting a "p" tag inside of my "td" tag like this:

<td><p class="">This is my loooooooong paragraph</p></td>

Then add this properties to the class, using max-width to define how wide you want your field to be

.p-wrap {
  max-width: 400px;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 12px;
}
Figx Technologies
  • 31
  • 1
1

if you want to wrap the data in td then you can use the below code

td{
    width:60%;
    word-break: break-word;
    }
Pooja Nandnikar
  • 67
  • 1
  • 6
0
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

I have tested with the binary data and its working perfectly here.

Garg
  • 2,731
  • 2
  • 36
  • 47
jaip
  • 31
  • 5
0

This is another way of tackling the problem if you have long strings (like file path names) and you only want to break the strings on certain characters (like slashes). You can insert Unicode Zero Width Space characters just before (or after) the slashes in the HTML.

Mark Lakata
  • 19,989
  • 5
  • 106
  • 123
0

If you want fix the column you should set width. For example:

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

Eugene
  • 1,690
  • 3
  • 16
  • 30