tableの背景色が変更できない。

Question

tableに関してです。

<table> <tr> <th>A</th>B<th></th><th>C</th><th>D</th> </tr> <tr> <td>あ</td><td>い</td><td>う</td><td>え　　　</td> </tr> <tr> <td>か</td><td>き</td><td>く</td><td>こ　　　　　　　　　　　　　</td> </table> <style> /* 見出し行だけ背景色を指定する場合 */ th { background-color: #6eb0f9; } </style>

どうしても、tableの一番上の行の背景色が
変更できません。
コードがおかしいでしょうか？
Wordpress　ルクセリタスを使用してます。

なぜか、th行は薄くグレー色になってます。

わかる方がいたら
教えて下さい。

よろしくお願いいたします。

Answer 1

他の方の回答にもあるようにテーマのCSSとの詳細度の関係だと思います。

たまたま私もルクセリタスを使ってますので確認してみたら、テーマのCSSでは、

.post th {
    text-align: center;
    background: #f5f5f5;
}

上記のようになっていたので、それより詳細度をあげればいいでしょう。

<style>
/* 見出し行だけ背景色を指定する場合 */
.post table th {
background-color: #6eb0f9;
}
</style>

あるいは、

<style>
/* 見出し行だけ背景色を指定する場合 */
th {
background-color: #6eb0f9 !important;
}
</style>

Comments

[Kakakaff1150253]

ご返信ありがとうございました。
!important;で背景色を変えることができました。

!important;の頻度は控えた方がよろしいですか？

[hatena19]

効果が大きいので、使いどころは考える必要がありますね。
今回の場合は、ページにHTMLで埋め込んでいると思いますので、影響があるのはそのページだけなので心配することはないと思いますが、設定する場所によっては思わぬ場所に影響することがあります。

[Kakakaff1150253]

同じルクセリタスということで
分かりやすく
ご丁寧な回答
ありがとうございました。
またの機会があればよろしくお願いいたします

Answer 2

WordPressのテーマに設定されているthの背景色設定が優先されているようです。
例えば、今回設定したいth要素にclass属性などを追加して、そのclassを指定してbackground-colorを設定してみたらどうなりますか？

CSSには優先順位というものがあり、ルールの一つとしてより指定先を具体的にする(詳細度)ことで、その箇所についてはCSSルールが反映されやすくなる、というものがあります。すでにWordPressのルクセリタスに優先度高めのCSSが設定されているため、th要素だけを指定したCSSが反映されない、という可能性があります。こちらを参照してみてください。
https://www.aiship.jp/knowhow/archives/30349

Comments

[Kakakaff1150253]

とても分かりやすく
ご丁寧な回答
ありがとうございました。
またの機会があれば
よろしくお願いいたします。