WordPress – テーブルのCSSによるカスタマイズ

WordPress – テーブルのCSSによるカスタマイズ

WordPressでのテーブルは基本的の設定しかできない。例えば幅の調整等はほとんど自由度が無い。それによりレイアウトが思い通りにならない場合がある。

横幅を細かく調整する

WordPressの基本機能では、表の横幅は「セル内の文字数による自動調整」または「一律の横幅」の2通りしか設定できない。当然、自由に横幅を調整したい時がある。

カラム数:3、行数:2の例。
以下のようにデフォルトで何もテキストが入っていない場合は均等になる。

ブロックエディタの「カスタムHTML」を使い、その中にCSSコードを記述する。これを入れる場所は基本的には、そのページ内ならどこでも良い。

テーブル内にテキストが入らないと、この幅の設定は有効にならない。

<style>
  table tr td:nth-child(1) {
    width: 50%;
  }
  table tr td:nth-child(2) {
    width: 20%;
  }
  table tr td:nth-child(3) {
    width: 30%;
  }
</style>

「width」は、テーブル全体に対して何%の横幅を使用するかを指定。
「tr td:nth-child()」は、左から何番目のセルに対して「width」を適用させるかを指定。
上記の例では「nth-child(3)」までしか記述していないので、左から3番目のセルの長さまでしか調整できない。
4列目、5列目と列が増える場合は「nth-child(4)」「nth-child(5)」の記述も必要になる。