テーブルのセルで改行させない方法を解説!

テーブルのセルで改行しないようにする方法を解説します。普通にtableを書いた場合には、tableのセル内の文章が長くなると自動的に改行してしまいます。改行しないようにするためにはどうすればいいのかをCSSを用いて解説します。

コンテンツ [表示]

  1. 1テーブルのセルで改行禁止にしたい
  2. 2テーブルのセルで改行させない方法
  3. 2.1HTMLのみを用いる場合
  4. 2.2CSSを用いる場合
  5. 3まとめ

テーブルのセルで改行禁止にしたい

テーブルのセル内の幅を超える文字を入れてしまうと、自動的に折り返してしまって、時にはものすごく見にくいテーブルとなってしまいます。

では実際にどのような形になるのかサンプルコードを用いて挙動を見てみましょう。

このようにテーブルの幅を超える文字を挿入すると自動的に改行されてしまうことが分かります。

では自動的に折り返さない、つまり改行しないようにするためにはどうすればいいのか、以下の項目で解説します。

テーブルのセルで改行させない方法

テーブルのセルで改行させない方法について、HTMLのみで行う方法と、CSSを用いて行う方法それぞれ解説します。

HTMLのみを用いる場合

HTMLのみを用いる場合、テーブルの改行させたくない要素に対して、nowrapを付け加えます。

今回の場合、td要素を改行させたくないのでtdタグの中にnowrapを付け加えます。こうすることでテーブルの幅を超える文字を挿入しても自動的に改行しない形になります。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにテーブルの幅を超える文字を挿入しても、自動的に改行されていないことが分かります。

しかし、実はこちらの方法はHTML5では非推奨となりますので、できるだけ以下で取り上げるCSSを用いた方法を用いるようにしてください。

CSSを用いる場合

CSSを用いる場合は、自動的に改行しないようにしたい要素に、white-space: nowrap;を適用させます。

今回の場合、td要素の内容を改行させたくないのでtd要素にCSSでwhite-space: nowrap;を適用させます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように自動的に改行されないことが分かります。

まとめ

いかがでしたでしょうか?

テーブルの中の文字が自動的に改行されてしまうことで、時にはとても見づらいテーブルとなってしまいます。

そこで今回解説した方法を用いてぜひテーブルを作成してみてください。

GeekHive採用サイト

関連記事