如何防止表格单元格在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中完成？

Answer 1

这样做

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

Answer 2

我尝试了像NoobEditor建议的百分比，但没有看到听起来像你正在寻找的结果。

因此，如果您可以使用像素而不是百分比，则应使用以下内容：

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