本サイトはアフィリエイト広告を利用しています

テーブル:セル内でテキストを折り返さないCSS設定

- スポンサーリンク -

HTMLで表を作成する時、セル内のテキストを自動改行禁止にする設定。

改行させたくないセル

テーブル(表)を作成する時に、セル内のテキストを改行させたくない場合があります。

例えば下の表。

ソフト名種類説明
Word文書作成Microsoft Wordは、Microsoft社が開発・販売している文書作成ソフトウェアです。
Excel表計算Microsoft Excelは、Microsoft社が開発・販売している表計算ソフトです。
Power PointプレゼンテーションMicrosoft PowerPointは、Microsoft社が開発・販売している「プレゼンテーション作成ソフト」のことです。

1列目最終行の「PowerPoint」が折り返されてますが、

これを折り返したくないのです。

こんな感じに…

ソフト名種類説明
Word文書作成Microsoft Wordは、Microsoft社が開発・販売している文書作成ソフトウェアです。
Excel表計算Microsoft Excelは、Microsoft社が開発・販売している表計算ソフトです。
Power PointプレゼンテーションMicrosoft PowerPointは、Microsoft社が開発・販売している「プレゼンテーション作成ソフト」のことです。

改行禁止の設定

white-space で改行禁止

テーブルのth要素、td要素に対し、white-spaceの値nowrapを指定すると、セル内で折り返さずに表示できる。

td{
   white-space: nowrap;
}

補足:white-space プロパティ とは

white-space は、インラインボックスのスペース、タブ、改行の表示方法を指定するプロパティ。

説明
normal標準 (初期値)
nowrapスペース、タブ、改行は半角スペースとして表示されます。ボックスの幅で自動改行されません。
preスペース、タブ、改行はそのまま表示されます。ボックスの幅で自動改行されません。
pre-wrapスペース、タブ、改行はそのまま表示されます。ボックスの幅で自動改行されます。
pre-line改行はそのまま表示され、スペースとタブは半角スペースとして表示されます。ボックスの幅で自動改行されます。
break-spaces基本的な動作はpre-wrapと同じですが、文末に連続するスペースがある場合はそれらもそのまま表示され、ボックスの幅で自動改行されます。

特定の列や行を指定する

テーブルの中で折り返しを禁止にする場合、一部のセルに指定するよりも、特定の行や列に指定したほうが使い勝手は良いですね

条件で要素を絞り込むことができる疑似クラスを利用すれば、HTML要素の1番目や2番目といった「何番目」や、「一番最初」「一番最後」など、特定の要素を指定できます。

詳細は下の記事を参照してください。


HTML&CSS
タイトルとURLをコピーしました