增加 td 的宽度，使内容在单行上答案

【问题标题】：Increase width of a td so that the contents is on a single line增加 td 的宽度，使内容在单行上
【发布时间】：2012-09-26 08:02:27
【问题描述】：

我有一个看起来像这样的表：

+----------------------+-------------------+
| This text is on the  | This text is on   |
| first column         | the second column |
+----------------------+-------------------+

我希望它看起来像这样：

+----------------------------------+-----------------------------------+
| This text is on the first column | This text is on the second column |
+----------------------------------+-----------------------------------+

我的桌子比屏幕长，而且有很多行，但这是我想要的功能。是否有一个 CSS 属性可以在不截断文本的情况下实现这一点？如果没有，有人可以向我指出如何执行此操作的 javascript 示例吗？

【问题讨论】：

no-wrap 应该可以工作：jsfiddle.net/RpSZt

【解决方案1】：

试试：

<table>
  <tr>
    <td nowrap>Look ma</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

如果您需要比white-space: nowrap 更广泛的浏览器支持，您可以使用pre 标签。虽然 css 解决方案更好，但如果您确实需要，请仅使用 pre：

<tr>
  <td><pre>This is my non wrapping text</pre></td>
  <td><pre>Some more non wrapping text</pre></td>
</tr>

显然，这仅适用于表格单元格中的简单 html，另外pre 通常带有它自己的默认样式，您可以在 CSS 中使用以下内容：

td pre {
  font-family: inherit;
  font-size: inherit;
  /* ... and so on */
}

使用inherit 的支持可能会稍微少一些，所以如果可以的话最好直接定义你想要的样式。

【讨论】：

为什么 no-wrap 属性在某些情况下不起作用？ jsfiddle.net/RpSZt
@David 这是来自较早的知识——我上一次自己使用它可能是在 3 年前。然而，最近有一篇帖子让我相信浏览器对no-wrap 的支持仍然存在问题（尤其是表格单元格） stackoverflow.com/questions/12212098/…——我个人会选择 css版本，除非我有具体证据证明它不适用于我的目标受众。我们真的应该停止支持过时的用户代理......
@David np :) - 像往常一样，IE 会导致问题并有损于良好的做事方式。

【解决方案3】：

试试white-space 属性：

td { white-space: nowrap; }

【讨论】：