html - 在可变宽度表上设置 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 一个最大宽度，您的新最大宽度是两个最大宽度的最大值。