表組を組んだ時に文字が改行されてバラバラと縦長になっしまう…
htmlで表組を作成した時、こんなふうに意図せず改行されてしまうことはありませんか？
| 土・日 | 予約可能 | お問い合わせください | 満席 | お問い合わせください | 席残りわずか | お問い合わせください |
まずはセルのwidthを調節する
セルのwidthを指定し、改行されない幅を確保するのが正攻法だと思います。
しかし、列が多く、ひとつを調整すると他が崩れる場合や、全体的に調整を入れている場合はwidthを指定するのが大変な時があります。
改行をされないようにするCSS「white-space: nowrap」を書く
改行をされないようにするCSSを書くことで、崩れを防止する事ができます。
<td style="white-space: nowrap">土・日</td>
他のセルは改行されてサイズに合ったレイアウトにしたいけど、特定のセルだけは改行されると見栄えが悪くなってしまうという時におすすめです。
この記事の著者
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
プロフィール
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
