【ブロックエディター対応】テーブルを最適な列幅に調整するやり方

WordPress のテーブルブロックの列幅は自動調整になっています。

そのため、望まないところで文字が折り返されたり、間延びしたり、残念なレイアウトになってしまうことがあります。

その具体的な例を2つ挙げてみます。

残念なレイアウトのテーブル①

以下のテーブルをパソコンのような画面幅が大きい端末で見るときれいにレイアウトされますが、スマホのような画面幅が小さい端末だと物件名と家賃が折り返されてしまいます。できれば、物件名と家賃は折り返さないようにしたいところです。

物件名	家賃	ポイント
青空ハイツ	78,000円	設備充実の新築物件…早い者勝ちです!!
メゾン・ライトニング	86,500円	お手頃な家賃で設備が充実。学校、病院、スーパーも近くにあり、立地条件もいいので生活に便利です。

残念なレイアウトのテーブル②

以下のテーブルをパソコンのような画面幅が大きい端末で見ると、物件名と家賃の列幅が大きく間延びしてバランスが悪く感じてしまいます。できれば、物件名と家賃は最小限の（最適な）列幅で表示したいところです。

物件名	家賃	ポイント
青空ハイツ	78,000円	設備充実の新築物件
メゾン・ライトニング	86,500円	お手頃な家賃で設備が充実

問題解決のための CSS

上記の残念なレイアウトを解決してくれる CSS がこちらです。

/* 1列目のセル */
figure.td-min-1 table td:nth-child(1) {
    width: 0;
    white-space: nowrap;
}

/* 2列目のセル */
figure.td-min-2 table td:nth-child(2) {
    width: 0;
    white-space: nowrap;
}

列幅を調整したテーブル

上記の CSS できれいにレイアウトされるように調整したテーブルがこちらです。

物件名	家賃	ポイント
青空ハイツ	78,000円	設備充実の新築物件…早い者勝ちです!!
メゾン・ ライトニング	86,500円	お手頃な家賃で設備が充実。学校、病院、スーパーも近くにあり、立地条件もいいので生活に便利です。

物件名	家賃	ポイント
青空ハイツ	78,000円	設備充実の新築物件
メゾン・ ライトニング	86,500円	お手頃な家賃で設備が充実

「メゾン・ライトニング」に VK Blocks の 画面サイズ毎の改行 を使って改行位置を指定してあります。

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2025年2月1日スターターパックのアコーディオンのデザインを追加しました
• WordPress2025年1月17日スターターパックのモバイルナビのデザインを2つ追加しました
• WordPress2024年12月25日WordPress コアの詳細ブロックで作った排他的に開閉するアコーディオン
• WordPress2024年12月14日VK Blocks Pro で投稿リストのカルーセル表示が超かんたんになった