Hi,
I have a table of users where each row contains their names, e-mail address, and such. For some users this row is one text line high, for some others two, etc. But I would like that each row of the table be one text line high, truncating the rest.
I saw these two questions:
- http://stackoverflow.com/questions/2779779/a-column-of-a-table-needs-to-stay-in-one-line-html-css-javascript
- http://stackoverflow.com/questions/1318108/css-limit-element-to-1-line
In fact my question is exactly similar to the first one, but since the link is dead I can't study it. Both answers say to use white-space: nowrap
. However this doesn't work, maybe I'm missing something.
Since I can't show you the code, I reproduced the problem:
<style type="text/css">
td {
white-space: nowrap;
overflow: hidden;
width: 125px;
height: 25px;
}
</style>
<div style="width:500px">
<table>
<tr>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
</tr>
</table>
</div>
Without white-space
the table is 500px wide, and the text takes more than one line.
But white-space: nowrap
makes the browser simply ignore the width
directive and increase the width of the table until all data fits in one line.
What am I doing wrong ? Thanks