「テーブル」ブロックの1列目のセル幅を文字幅に合わせ、文字の両端も揃える方法

はじめに
完成イメージ
実装手順
解説
さいごに

はじめに

「テーブル」ブロックのセル幅を自動で文字幅に合わせ、さらに行ごとの文字の両端も揃えます。

この記事では、この方法について説明します。

完成イメージ

会社名	株式会社 InnoLife
本社所在地	〒106-0000 東京都六本木
設立年月日	2025年1月1日
資本金	666万円
代表者	山田太郎
電話番号	00-0000-0000

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で作成します。
1. 「テーブル」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-tableと入力します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.body .my-table table {
  width: 100%;

  tr {
    background-color: transparent;
  }

  th:first-child,
  td:first-child {
    background-color: #eee;
    text-align-last: justify;
    white-space: nowrap;
    width: 1em;
  }
}

解説

width: 1em;に加えてwhite-space: nowrap;を指定することで、改行を防ぎ、セルの幅が内容（文字列の長さ）に応じて自動的に調整される。
さらに、text-align-last: justify;を使うことで、セル内のテキストを両端揃えにできる。

さいごに

今回紹介した方法を使えば、「テーブル」ブロックの1列目のセル幅を文字幅に自動で調整しつつ、行ごとにテキストを両端揃えにすることができます。
テーブルの情報が読みやすく、デザイン的にも整った見た目になるため、会社概要やスペック表などの表示にも最適です。