增加td的寬度，使內容在一行上

Question

我有一個看起來像這樣的表：

+----------------------+-------------------+
| 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示例？

Answer 1

試試white-space ：

td { white-space: nowrap; }

Answer 2

如果您需要比white-space: nowrap更廣泛的瀏覽器支持white-space: nowrap您可以使用預標簽。 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可能會稍微少一點，所以如果可以的話，最好直接定義你想要的樣式。

Answer 3

嘗試：

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