テーブル セル内のテキストが折り返さないセルを指定したい
テーブルの幅が狭くなっても改行させたくないテキストがあると、そのセルに「white-space: nowrap;」を適用します。
white-spaceプロパティ
white-spaceプロパティは「テキストを途中で改行するかどうか」を制御するだけでなく、正確には「空白文字」と呼ばれる半角スペース、タブ、改行（Enter）などの文字をどう表示するかを決めるのに使われます。このプロパティには次の値があります。
| 値 | 説明 |
|---|---|
| normal | スペースが連続するなど空白文字が続くとき、半角スペース1文字分のスペースだけが空きます。また、テーブルのセルなど表示できるスペースが限られているとき、テキストは改行されます。 |
| nowrap | 連続する空白文字は1文字分のスペースだけ空きます。表示できるスペースが限られていても改行しません。 |
| pre | 連続するスペースをそのまま表示します。改行文字（Enter）や<br>で改行しますが、それ以外では改行しません。 |
| pre-wrap | 連続するスペースをそのまま表示します。改行文字（Enter）や<br>で改行し表示できるスペースが限られているときも改行します。 |
| pre-line | 連続する空白文字は1文字分のスペースだけ空きます。改行文字（Enter）や<br>で改行し、表示できるスペースが限られているときも改行します。 |
サンプル
サンプルでは、4列目以降の各列はテーブルの幅が狭くなっても改行しないようにしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
<style>
table{
border-collapse:collapse;
}
td,th{
padding: 6px 20px;
border: 1px solid #b7b7b7;
}
th{
background-color: #2c8daa;
color: #fff;
}
th:nth-child(n+4),td:nth-child(n+4){
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>年月</th><th>イベント</th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
</tr>
</thead>
<caption>東部営業所の売上一覧</caption>
<tbody>
<tr>
<td>2022/1</td><td></td><td>500万円</td><td>2,100万円</td><td>250万円</td>
</tr>
<tr>
<td>2022/2</td><td>東日本大震災により売り上げが激減</td><td>500万円</td><td>300万円</td><td>300万円</td>
</tr>
<tr>
<td>2022/3</td><td></td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
<tr>
<td>2022/4</td><td></td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
<tr>
<td>2022/5</td><td></td><td>2,300万円</td><td>,700万円</td><td>1,500万円</td>
</tr>
<tr>
<td>2022/6</td><td></td><td>1,500万円</td><td>1,00万円</td><td>500万円</td>
</tr>
<tr>
<td>2022/7</td><td></td><td>500万円</td><td>1,700万円</td><td>1,00万円</td>
</tr>
</tbody>
</table>
</body>
</html>実行結果
