WordPress個別サポート

サイト内に追加する料金表などのテーブルのヘッダーに背景色を付ける場合、theadタグやthタグを目印にCSSを記述すれば簡単ですが、すべてのテーブルにtheadタグやthタグが存在するとは限りません

その場合、CSSでヘッダー行の位置(行番号)を指定すれば大丈夫ですが、セル結合されたヘッダーの場合、「ヘッダー=1行目」だと思って作業すると意図しない結果になるので注意が必要です。

スポンサーリンク

ヘッダーに背景色を設定する

次のような簡単なテーブルのヘッダー(1行目)に適当な色をつけます。

背景色を設定したい

背景色を設定したい

1行目に背景色を付けるCSSは次のようになります。

table tr:nth-of-type(1) {
    background-color: #bcbcbc;
}

ヘッダー部分に背景色が付きます。

背景色が設定される

背景色が設定される

CSSのポイントは「1行目」の書き方です。

HTMLタグの構成を見ると1行目はtableタグの中で1番目の要素(trタグ)になっています。1番目の書き方はいくつかありますが、ここでは何番目の要素なのかを指定できる「nth-of-type」を使って「nth-of-type(1)」としています。

つまり、「tr:nth-of-type(1)」で1行目ということです。

これにより、1行目に背景色を付けることができます。

セル結合されたヘッダーの場合

ヘッダーはセル結合することもあります。次のようなイメージです。「料金」や「コース」はセルが結合されています。

セルが結合されたテーブル

セルが結合されたテーブル

このテーブルに前述の1行目に背景色を付けるCSSを適用してみると意図しない結果になります。

背景色が不完全

背景色が不完全

これは、HTMLのソースコードを見るとわかりますが、ヘッダーの「基本料金」「延長料金」の部分が2行目だからです。2番目の「tr」だということです。

色がついていないヘッダーは2行目

色がついていないヘッダーは2行目

ですから、2行目にも背景色を付けるようにCSSを修正する必要があります。

table tr:nth-of-type(1),
table tr:nth-of-type(2) {
    background-color: #bcbcbc;
}

今度はうまくいくはずです。

2行目まで背景色が付く

2行目まで背景色が付く

CSSを簡単に書くには

このCSSで問題があるとすれば、行数が増えるとCSSの記述が面倒になることです。上記の例は2行ですが、5行、6行になると次のようなCSSになり、メンテンナスが面倒になります。

table tr:nth-of-type(1),
table tr:nth-of-type(2),
table tr:nth-of-type(3),
table tr:nth-of-type(4),
table tr:nth-of-type(5),
table tr:nth-of-type(6),
...略...

できれば「1行目から6行目」などを簡単に指定できた方が便利です。その場合、「何番目まで」をまとめて書く方法があります。たとえば、「2番目まで」は次のようになります。

table tr:nth-of-type(-n + 2) {
    background-color: #bcbcbc;
}

これで2行目までのヘッダーに背景色が付きます。

2行目まで背景色が付く

2行目まで背景色が付く

不思議な書き方に思えるかもしれませんが使いこなすと便利です。

「何番目から」などを含めて、その他の書き方は以下のページも参考にしてください。

【参考】CSSで何番目・偶数奇数・何番目以降・最初最後などを指定する擬似クラス

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・ログインできない・サーバー移転 ... )
いろいろ質問できる対面サポートまたは作業代行を依頼できるメールサポートで対応します。ご都合に合わせて気軽にご相談ください。
現在までの対応件数:1806件
WordPress個別サポート
WordPress講座の問い合わせ先
wordpress講座受講予約

関連記事

スポンサーリンク