td 内容过宽时表格溢出父 div

Question

我准备了一个 JSFiddle 来解释/展示我的问题：http://jsfiddle.net/nz96C/

起初看起来不错，但是当我向#firsttd 添加一些文本时，一旦使用了 tds 整个宽度，整个表格就会溢出父 div。我知道如何用 CSS (#firstdiv {width:90px;overflow:hidden;}) 解决这个问题，但我不知道像素的确切数量（百分比不起作用）。另外我不希望第一个 td 中的文本换行。

我希望你能明白我的问题，我什至无法用我的母语解释它。

编辑：我的目标是创建一个表格，无论第一个 td 中的文本有多长，该表格都不应溢出父 div - 无需包装文本。我希望不显示溢出第一个 td 的文本。

Answer 1

与另一个最近的话题相同的答案：table-layout:fixed; + width。 DEMO

table {
    table-layout:fixed;
    width:100%;
}
td {
    border: 1px solid black;
    overflow:hidden;/* optionnal*/
}
#firsttd {
    white-space: nowrap;
}

---

编辑：关于下面的评论：

@MatthieuRiegler

表格布局：固定；如果你想要不同宽度的单元格，那就不好了。

这是一个表格布局和单元格宽度可以不同的演示：

table {
  width: 100%;
  table-layout: fixed;
}

table,
td,
th {
  border: 1px solid;
}

thead tr th:nth-child(1) {
  width: 5em;
}

thead tr th:nth-child(2) {
  width: 20%;
}

thead tr th:nth-child(3) {
  width: 7.5em;
}

<table>
  <thead>
    <tr>
      <th>Head Cell</th>
      <th>Head Cell</th>
      <th>Head Cell</th>
      <th>Head Cell</th>
      <th>Head-Cell-Text</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

如果不考虑响应性，width + table-layout:fixed 可能只是个坏主意。