I want the text in one of the columns of a
table to not wrap, but to just truncate so that it fits within the current size of the
table cell. I don't want the
table cell to change size, as I need the
table to be exactly 100% the width of the container.
This is because the
table with 100% width is inside of a positioned div with overflow: auto (it's actually inside of a jquery UI.Layout panel).
I tried both overflow: hidden and the text still wrapped. I tried white-space: nowrap, but it stretched the
table wider than 100% and added a horizontal scroll bar.
div.container {
position: absolute;
overflow: auto;
/* user can slide resize bars to change the width & height */
width: 600px;
height: 300px;
}
table { width: 100% }
td.nowrap {
overflow: hidden;
white-space: nowrap;
}
<div class="container">
<table>
<tr>
<td>From</td>
<td>Subject</td>
<td>Date</td>
</tr>
<tr>
<td>Bob Smith</td>
<td class="nowrap">
<strong>Message subject</strong>
<span>This is a preview of the message body and could be long.</span>
</td>
<td>2010-03-30 02:18AM</td>
</tr>
</table>
</div>
Is there a way using css to solve this? If I had a fixed
table cell size, then overflow:hidden would truncate anything that flows over, but I can't used a fixed size as I want the
table to stretch with the UI.Layout panel size.
If not, then how would I solve this with jquery?
My use case is similar to the gmail interface, where an email subject is bolded and the beginning of the message body is shown, but then truncated to fit.
