How to make a td element not wrap text inside a table?

Question

I have a table that displays some information. The last "td" element in the table contains a lot of text and I would like for that text to be cut off after a certain point and to not wrap inside the table cell. Here is currently what I have for the table row:

<tr>
    <td> content</td>
    <td> content</td>
    <td> content</td>
    <td> content</td>
    <td> content</td>
    <td class="hidden"> really long content that wraps instead of hiding.</td>
</tr>

And my CSS for the hidden class:

div.hidden {
    white-space: nowrap;
    overflow: hidden;
    max-width: 90px;
}

I have tried using these restrictions in several different ways and this way gets me the closest to what I want, but still wraps the text instead of hiding it. I'm trying to get this to work in both Chrome and IE. Sometimes placing these restrictions directly on the td element will get the table to show properly in Chrome but not in IE. Any thoughts on how to fix this?

Answer 1

I resolved the problem by taking a different approach. I reworked my table to use Scala instead of plain html, javascript, css, etc. and used Scala to restrict the amount of characters printed out on the screen. A solution can be seen here: How to limit the number of characters in a string displayed using Scala

Thank you for everyone who tried to help resolve this problem!

Answer 2

Change div.hidden to td.hidden

http://jsfiddle.net/yPVQX/

Update: Try adding

<colgroup>
    <col>
    <col>
    <col>
    <col>
    <col>
    <col style="width: 90px">
</colgroup>

and/or

.table {
   table-layout: fixed;
}

Answer 3

        <td nowrap> really long content that wraps instead of hiding. </td>