Усеченный текст для установки ячейке таблицы, не перенося использование CSS или jQuery

Я хочу, чтобы текст в одном из столбцов таблицы не перенесся, но просто усек так, чтобы это соответствовало в текущем размере ячейки таблицы. Я не хочу, чтобы ячейка таблицы изменила размер, поскольку мне нужна таблица, чтобы быть точно 100% ширина контейнера.

Это вызвано тем, что таблица с 100% ширина в расположенном div с переполнением: автоматический (это на самом деле в jQuery UI.Layout панель).

Я попробовал обоих overflow: hidden и текст, все еще перенесенный. Я попробовал white-space: nowrap, но это расширило таблицу шире, чем 100% и добавил горизонтальную полосу прокрутки.

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>

Существует ли способ использовать CSS для решения этого? Если у меня был фиксированный размер ячейки таблицы, то overflow:hidden усек бы что-либо, что течет, но я не могу, использовал фиксированный размер, поскольку я хочу, чтобы таблица простиралась с UI.Layout размер панели.

В противном случае затем, как я решил бы это с jQuery?

Мой вариант использования подобен интерфейсу Gmail, где почтовый предмет является полужирным, и начало тела сообщения показывают, но затем усеченный для установки.