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.
