html tableで文字が改行されて崩れてしまう時の解決法

表組を組んだ時に文字が改行されてバラバラと縦長になっしまう…

htmlで表組を作成した時、こんなふうに意図せず改行されてしまうことはありませんか?

土・日 予約可能 お問い合わせください 満席 お問い合わせください 席残りわずか お問い合わせください

まずはセルのwidthを調節する

セルのwidthを指定し、改行されない幅を確保するのが正攻法だと思います。
しかし、列が多く、ひとつを調整すると他が崩れる場合や、全体的に調整を入れている場合はwidthを指定するのが大変な時があります。

改行をされないようにするCSS「white-space: nowrap」を書く

改行をされないようにするCSSを書くことで、崩れを防止する事ができます。

<td style="white-space: nowrap">土・日</td>

他のセルは改行されてサイズに合ったレイアウトにしたいけど、特定のセルだけは改行されると見栄えが悪くなってしまうという時におすすめです。

Home
つくる
特長
無料相談
公式LINE
問合せ