表の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 を指定します。

この結果、表は以下のように表示されます。
開催日 | 内容 |
---|---|
9月3日(木) | Word フリーレッスン やりたいこと・知りたいことに的を絞ってレッスンしますので、短時間で費用が安く済みます。全国どこからでもオンラインレッスンでご受講いただけます。 |
10月28日(水) | ホームページ作成 会社やお店のホームページを作成するために必要な知識や操作を習得します。 |
11月10日(火) | パソコン資格取得 P検合格レベルのスキルを習得することを目的としたコースです。 |
あなたのお悩み・お困りごとの解決をお手伝いします
お客様のご要望に合わせてできる限りのサポートをさせていただきます。
パソコン業務でお困りのこと、ホームページの運用や更新のこと・・・どんなことでもお気軽にお問い合わせ・ご相談ください。
パソコン業務でお困りのこと、ホームページの運用や更新のこと・・・どんなことでもお気軽にお問い合わせ・ご相談ください。