[html/css] html でtableのセル内とかで自動改行(折り返し)禁止にする方法(nowrap, whitespace)

htmlで自動で改行して欲しくいときに、改行(折り返し)禁止にする方法です。

こんな感じ

こちらのセルは自動改行禁止にしています。

こちらのセルは自動改行禁止にしていません。

whitespace(CSSとして別で記述)

htmlファイル

<table border="1" width="500">
  <tr>
    <td class="test">こちらのセルは自動改行<span style="color: #ff0000"><b>禁止</b></span>にしています。</td>
    <td>こちらのセルは自動改行禁止にしていません。</td>
  </tr>
</table>

CSSファイル

.test {
  white-space: nowrap;
}

nowrap(タグ内に直接記述)

HTMLファイル

<table border="1" width="500">
  <tr>
    <td nowrap>こちらのセルは自動改行<span style="color: #ff0000"><b>禁止</b></span>にしています。</td>
    <td>こちらのセルは自動改行禁止にしていません。</td>
  </tr>
</table>

• 3行目のnowrapをつけると改行禁止になります
• ただしこのやり方は現在は非推奨となっているので、今後使えなくなる可能性があります。