表の1列目をセル内改行しないようにするやり方 – WordPress ブロックエディターの場合

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

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

開催日内容
9月3日(木)Word フリーレッスン
やりたいこと・知りたいことに的を絞ってレッスンしますので、短時間で費用が安く済みます。全国どこからでもオンラインレッスンでご受講いただけます。
10月28日(水)ホームページ作成
会社やお店のホームページを作成するために必要な知識や操作を習得します。
11月10日(火)パソコン資格取得
P検合格レベルのスキルを習得することを目的としたコースです。

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

そこで・・・

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

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

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

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

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

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

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

開催日内容
9月3日(木)Word フリーレッスン
やりたいこと・知りたいことに的を絞ってレッスンしますので、短時間で費用が安く済みます。全国どこからでもオンラインレッスンでご受講いただけます。
10月28日(水)ホームページ作成
会社やお店のホームページを作成するために必要な知識や操作を習得します。
11月10日(火)パソコン資格取得
P検合格レベルのスキルを習得することを目的としたコースです。

更新情報を受取る

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

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

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