文字数が多い表は行が折り返されて読みづらくなってしまうことがよくあります。

例えば以下の表では 開催日 が折り返されて読みづらく、特にスマホで表示すると悲しい結果になってしまいます。

このような長めの文章を含む表の場合、横スクロールするのはよい解決策にはなりません。

そこで・・・

1列目をセル内改行しないようにする

読みやすくするためには、開催日をセル内改行しないように設定すればよいです。

そのための準備として、スタイルシートに以下の行を追加します。

/* テーブルの1列目をセル内改行をしないようにする */
.col1-nowrap td:nth-of-type(1) { white-space: nowrap;}

そして、ブロックエディターでテーブルブロックの 追加 CSS クラス に col1-nowrap を指定します。

この結果、表は以下のように表示されます。

更新情報を受取る

@pc_klik

ホームページでお困りのこと、お気軽にご相談ください

効果が出るホームページを格安料金で制作いたします。リニューアル、スマホ対応、SNS連携、SEO対策、常時SSL化などもおまかせください。ホームページのちょっとしたデザイン変更や表示不具合の修正、更新作業のお手伝いもしています。

お困りのこと、なんでもお気軽にご相談ください。

ご相談・お問合せはこちら