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番目といった「何番目」や、「一番最初」「一番最後」など、特定の要素を指定できます。
詳細は下の記事を参照してください。