html - 如何使 td 元素不在表格内包装文本？

Question

我有一个显示一些信息的表格。表格中的最后一个“td”元素包含大量文本，我希望该文本在某个点后被截断并且不在表格单元格内换行。这是目前我对表格行的看法:

<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>

还有我的隐藏类的 CSS:

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

我尝试过以几种不同的方式使用这些限制，这种方式让我最接近我想要的，但仍然包裹文本而不是隐藏它。我正在努力让它在 Chrome 和 IE 中都能正常工作。有时将这些限制直接放在 td 元素上会使表格在 Chrome 中正确显示，但在 IE 中不能正确显示。关于如何解决这个问题有什么想法吗？

Answer 1

将div.hidden更改为td.hidden

http://jsfiddle.net/yPVQX/

更新:尝试添加

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

和/或

.table {
   table-layout: fixed;
}