在可变宽度表上设置td宽度并忽略内容的大小

Question

我试图创建一个在可变宽度容器div中具有固定宽度td / th元素的表。但是，单元格的内容不会按预期溢出。文本应该保持在一行（白色空间：nowrap），然后被切断。

在下面的示例中，第二列中的文本，第一个tbody行应该被切断但是它不是。 （见jsfiddle）。

Html（上面链接中的Css）：

<div id="container">
  <table>
    <thead>
      <tr>
         <th id="idCol">Id</th>
         <th id="descCol"><a>Description</a></th>
         <th class="otherCol">Test</th>
         <th class="otherCol">Test2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>10</td>
         <td>Text that should be cut off because this text is extra long</td>
         <td>a Column</td>
         <td>foo Column </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

或者，如果您真的希望自己的内容不能换行，则应该添加

max-width: 0;

到CSS中的 td 。

似乎虽然 th 具有最大宽度，但 td 可以变大并覆盖它。通过给出 td 最大宽度，您的新最大宽度是两个最大宽度的最大值。