如何使用CSS防止表格单元格换行？

Question

我有一个包含类似以下表格的 HTML 文档:

<table>
    <tr>
        <td>
            term
        </td>
        <td>
            this is a definition
        </td>
    </tr>
</table>

这是一个示例，呈现效果如下：

这样显示：

 _____________________________
| term | this is a definition |
|______|______________________|

当我在第一列中输入一个由两个单词组成的单词，例如"Web浏览器"，这就是结果：

 _____________________________
| Web     | a tool for using  |
| browser | the WWW           |
|_________|___________________|

如何通过CSS调整此行为，以便仅在内容超过表格宽度的50％时，第一列才会出现换行？

理想情况下，左侧单元格中的术语不应该有换行：

 _____________________________
| Web browser | a tool for    |
|             | using the WWW |
|_____________|_______________|

如果左侧单元格的术语确实很长，例如超过表格宽度的50％，则换行是可以接受的：

 _____________________________
| this is a long | .......... |        
| term           | .......... |
|________________|____________|

这可以通过CSS来实现吗？

- Village

---

您尝试过使用table-layout: fixed吗? http://jsfiddle.net/mr_alien/vSQ5N/ - Mr. Alien

Answer 1

以这种方式执行。

 html,body,table{
    width:100%;
    height:100%
 }
 tr > td:first-child{
    white-space:nowrap;
    max-width:50%;
    word-break:break-all;
 }

- NoobEditor

---

你需要为每个第一个td添加一个类来针对nowrap仅应用于左列，或者在你的css中添加:nth-child()参数。好的，不用管了，在编辑中已经修复了。 - WBO Co.

@WBOCo.：...你的评论和我的编辑同时出现了...虽然+1给你的评论!! :) - NoobEditor

Answer 2

我按照NoobEditor的建议尝试了百分比，但似乎没有看到你期望的结果。

如果你可以使用像素而不是百分比，那么以下类似的内容应该可以起作用：

table{
    width:500px;
}
td:nth-child(odd) {
    max-width:250px;
}
td:nth-child(even) {
    min-width:250px;
}

- Frankenscarf