ブロックエディタでテーブルの項目幅や文字寄せをCSSで調整する

WordPressのブロックエディタではテーブルの機能が簡素で複雑なテーブルを作ることができません。

個人的にテーブルを見やすく表示するために必要な機能が以下になります。

• 項目ごとの幅を個別に設定
• 項目ごとのテキストの左、中央寄せの設定

プラグインで実現しようとすると複数のプラグインの導入が必要みたいで面倒そうでした。

ここではこれらをCSSで制御する方法を紹介します。

コピペ用CSS

テーブルをCSSで制御したいときに使用するコピペ用CSSです。この記事を読み終わったあとに利用してください。

td:nth-of-type(1) {
	text-align: center;
	text-align: left;
	width: 20%;
}
td:nth-of-type(2) {
	text-align: center;
	text-align: left;
	width: 20%;
}
td:nth-of-type(3) {
	text-align: center;
	text-align: left;
	width: 20%;
}
td:nth-of-type(4) {
	text-align: center;
	text-align: left;
	width: 20%;
}
td:nth-of-type(5) {
	text-align: center;
	text-align: left;
	width: 20%;
}

• 「td:nth-of-type(1)」が1列目、「td:nth-of-type(2)」が2列目、以降順々になります。
• 列数を増やしたい場合は「td:nth-of-type(6)」以降を自分で追加してください。
• 文字寄せは「text-align: center;」か「text-align: left;」の使用しない方を削除してください。
• 横幅は最終行だけ指定しないと100%までの残り%が自動的に適応されます。

コピペ用CSSを貼り付ける場所

CSSは記事作成画面を下までスクロールすると表示される「カスタムCSS」に貼り付けてください。

テーブルをCSSで制御した場合の例

最初にこのページではどういったことを目的としているか、テーブルをCSSで制御するとどうなるかを例として行ってみます。

調整したいテーブル例

以下のテーブルをCSSで制御してみたいと思います。

テーブルを見やすくするために1～3列目の幅を表示が崩れない範囲で狭くします。

あわせて1～3列目のテキストを中央寄せ、4列目だけ左寄せにします。

調整後のテーブル

以下がCSSで調整したテーブルになります。

使用したCSSはこちら。

td:nth-of-type(1) {
	text-align: center;
	width: 20%;
}
td:nth-of-type(2) {
	text-align: center;
	width: 10%;
}
td:nth-of-type(3) {
	text-align: center;
	width: 10%;
}
td:nth-of-type(4) {
	text-align: left;
}

疑似クラス 「:nth-child() 」を使用してテーブルの列ごとにスタイルを指定しました。

「:nth-child(1) 」が左から1列目、「:nth-child(2) 」が2列目になります。

スマホ表示にも対応したレスポンシブデザインにするため項目の幅はパーセントで設定します。

4列目に％を指定していないのは、指定しないと自動で残りの60％が適応され合計100％になるからです。

記事の特定のテーブルだけに指定する方法

上記で説明したCSSでは記事の全てのテーブルに適応されてしまいます。

特定のテーブルだけを指定したい場合はブロックエディタの「追加CSSクラス」を利用します。

手順は、最初に目的のテーブルブロックをクリック、右ツールバー下部の「高度な設定」をクリックすると表示される「追加CSSクラス」欄に任意のクラス名を追加（ここではSample1-Table)します。

あとは以下のようにCSSにクラス名を追記するだけです。

.Sample1-Table td:nth-of-type(1) {
	text-align: center;
	width: 20%;
}
.Sample1-Table td:nth-of-type(2) {
	text-align: center;
	width: 10%;
}
.Sample1-Table td:nth-of-type(3) {
	text-align: center;
	width: 10%;
}
.Sample1-Table td:nth-of-type(4) {
	text-align: left;
}