CODEWITHSUNDEEP
htmlcss
RepeatUntil
RepeatUntil

Reputation: 2320

How to make the table use multiple lines on long text using css

How I can make the table use multiple lines on each row exceeded the max-width of that table

enter image description here

.table {
  font-size: 12px;
  border-bottom: 1px solid #dddddd;
  color: #8d8d8d;
  max-width: 400px;
}
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
  padding: 7px; 

}
tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
td {
  background:#FFFFFF;
  vertical-align:middle;
  word-wrap:break-word;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
  padding: 7px;
}
<pre>               
<table id="TBLTBLDATA" border="1" cellpadding="0" cellspacing="0" class="table" style="position: relative;z-index: 100; width: 296px; height: 26px; padding: 0; font-weight: normal; font-style: normal; text-decoration: none;font-size: 13px; ">
<tr><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">TEST</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">Data</td></tr>
<tr><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">123</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">XXX</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">0000000</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">57-41</td><td valign="middle" align="left" class="table" style="white-space: nowrap;position:static;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td></tr></table></pre>

Upvotes: 2

Views: 21092

Answers (2)

user4108694
user4108694

Reputation:

I'll give you two solutions.

Statically created text in table cell

Your text in the TD Cell is given by the time you developed the website and not created automatically by , lets say an XML response. Then according to http://www.uwec.edu/help/html/tb-multiline.htm here is your answer:

When the text in a single table cell exceeds a few words, a line break (<BR>) may improve the appearance and readability of the table. The line break code allows data to be split into multiple lines. Place the line break code <BR> within the text at the point(s) you want the line to break. Notice in the examples below that the line break code can be used in data cells as well as in headers.

Remember that the user of your document has final control over font and size. Some line break codes, though appropriate with your preference settings, may be inappropriate under other conditions.

Dynamically created text in table cell

Else if your text inside the cell comes dynamically and you don't know the actual size of it you can make the following:

  1. Add a class to the table cell you want the effect to be placed. It is not necessary to do it although.

  2. Add the following to style to the table column you want.. I hope it helped you.

    text-wrap: normal;
word-wrap: break-word;

Upvotes: 4

arturas
arturas

Reputation: 1116

Just add word-wrap: break-word; to your td CSS. If you'd like to use only one row and hide extra symbols, use overflow: hidden;

Upvotes: 1

Related Questions