【WordPress】テーブルの行や列を指定して幅・背景色・フォントなどをカスタマイズする方法

WordPressの標準テーブルですが、表にしたい内容とテーブルのデザインが上手くマッチしないケースがあると思います。

その時々で内容が違うから仕方ない事ではありますが、プラグインに頼るほど頻繁にテーブルを使っている訳でもなく、でも1度HTMLモードでカスタマイズするとビジュアル編集できない？のでそれはまた面倒。

という事で、各ページに設けてあるカスタムCSSを利用してテーブルをページ毎にカスタマイズするという方向性で主なカスタマイズ用コードを纏めました。

テーブルのカスタマイズ方法

ページ毎にデザインを変える場合はスタイルシートや追加CSSではなくカスタムCSSを使います。※各ページに設けてある機能

独学の私は基礎が出来てないので毎回カスタマイズに苦戦。今回も初歩ミスにより無駄に時間を費やしてしまいました。

そんな私から注意点を共有します(　・ω・)

セレクタ名の前にドットは不要

セレクタ（下の画像だとtable）の前にドットは不要。クラス名の前にはドットが必要。

スペースや改行に注意する

「th :first-child」と意味も分からずthの後ろに半角スペースを入れていた為、カスタマイズが正しく反映されずに混乱しました。

思った通りにカスタマイズが反映されない時は、スペル以外に不要なスペースも疑ってみてください。

カスタマイズ用コード

ブロック側の設定内容によってはカスタマイズが反映されない場合がありますので、あくまでも参考程度に見ていただければと思います。

私はいつも「表のセル幅を固定」「ヘッダーセクションを追加」を有効にしています。HTMLモードで編集するとブロックとしての設定変更ができなくなるので、背景色やフォント位置などは先に設定しておきましょう。

テーブルの幅を変更・指定する

/**テーブル全体の幅を固定**/
table {width: 100px !important;}

/**テーブルの最大幅を指定**/
table {max-width: 200px;}

/**テーブルの最小幅を指定**/
table {min-width: 800px;}

テーブルの最大幅・最小幅はmaxやminで指定出来ましたが、全体の幅を固定する場合は「!important」を追加する必要がありました。

それぞれ変化がわかりやすい様に極端な数値にしています。

ヘッダーだけ背景色・文字色を変える

thead {background: #333; color:#fff;}

ヘッダーだけ文字を中央寄せに

th {text-align:center !important;}

標準機能に左寄せ・中央・右寄せがあるので、それより強く指定するには「!important」が必要です。

なるべく標準機能で済ませたいところです。

1番左の列だけ幅を指定

th:first-child {width:10%;}

○番目の列だけ背景色を変える

td:nth-child(3) {background: red;}

○番目の行だけ背景色を変える

tr:nth-of-type(3) {background: blue;}

○行目の○列目だけ背景色を変える

tr:nth-child(3) td:nth-of-type(4) {background: yellow;}