1. ホーム
  2. ハイパーリンク

[解決済み】テーブルセル内のテキストを折り返さない方法

2022-04-29 02:49:33

質問

テーブルのセル内のテキストが折り返されないようにする方法をご存知の方はいらっしゃいますか? これは表のヘッダー用で、ヘッダーはその下のデータよりかなり長いのですが、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に関連する理由からです。

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

何かアイデアはありますか?

解決方法は?

をご覧ください。 white-space プロパティは、このように使用します。

th {
    white-space: nowrap;
}

の内容を強制的に削除します。 <th> を1行に表示する。

リンク先のページでは、以下のように white-space :

<ブロッククオート

通常

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

プリ

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

ナウラップ

この値は、'normal' と同様にホワイトスペースを折りたたみますが、テキスト内の改行を抑制します。

プリラップ

この値は、ユーザーエージェントが一連の空白を折りたたむことを防ぎます。行は、保存された改行文字で分割され、行ボックスを埋めるために必要な場合もあります。

プリライン

この値は、ユーザエージェントに一連の空白を折りたたむように指示する。行は,保存された改行文字で分割され,また,行ボックスを埋めるために必要である。