表のセル内のテキストが折り返されないようにする方法

テーブルセルのテキストが折り返されないようにする方法を誰かが知っていますか？これはテーブルのヘッダー用であり、見出しはその下のデータよりもはるかに長くなりますが、1行だけで表示する必要があります。カラム幅が非常に広い場合も問題ありません。

（簡略化された）テーブルのHTMLは次のようになります。

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

見出し自体はth、ページ上のJavaScriptに関連する理由により、タグ内のdivで囲まれています。

表は、見出しが複数行に折り返されて表示されます。これは、ブラウザが水平スクロールを回避しようとしているため、テーブルが十分に広い場合にのみ発生するようです。私の場合は、しかし、私は水平スクロールが欲しいです。

何か案は？

white-spaceこのように使用されるプロパティを見てください：

th {
    white-space: nowrap;
}

これにより、の内容が強制的<th>に1行で表示されます。

リンクされたページから、ここにさまざまなオプションがありますwhite-space：

normal
この値は、ユーザーエージェントに一連の空白文字を折りたたみ、必要に応じて行ボックスを埋めるために改行するよう指示します。

pre
この値は、ユーザーエージェントが空白のシーケンスを折りたたむのを防ぎます。行は、保存された改行文字でのみ改行されます。

nowrap
この値は、「通常」の場合と同様に空白を折りたたみますが、テキスト内の改行を抑制します。

pre-wrap
この値は、ユーザーエージェントが空白のシーケンスを折りたたむのを防ぎます。保存された改行文字で、および必要に応じて行ボックスを埋めるために、行が分割されます。

pre-line
この値は、空白のシーケンスを折りたたむようにユーザーエージェントに指示します。保存された改行文字で、および必要に応じて行ボックスを埋めるために、行が分割されます。

<th nowrap="nowrap">

または

<th style="white-space:nowrap;">

または

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>

それには少なくとも2つの方法があります。

「td」タグ内でnowrap属性を使用します。

<th nowrap="nowrap">Really long column heading</th>

単語間には改行できないスペースを使用します。

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>

ハイフンでのテキストの折り返しを防ぐ必要があるこの質問に来ました。

これは私がそれをした方法です：

<td><nobr>Table Text</nobr></td>

参照：

すべてのブラウザでハイフンでの改行を防ぐ方法

React / Material UIで使用

ここで、Reactでのビルド時にMaterial UIでこれがどのように機能するのか疑問に思っている場合は、これを<TableHead>コンポーネントに追加する方法を次に示します。

<TableHead style={{ whiteSpace: 'nowrap'}}>