CSSを特定のページのtable要素にだけ当てたい。

Question

前提・実現したいこと

CSSを特定のページのtable要素にだけ当てたい。

発生している問題・エラーメッセージ

現在サイト全体でtableのCSSを設定しているのですが、TOPページだけ表のborderを消そうとしています。
次のようなコードを書いたところ、縦の線は消えたのですが、外の線と行の線が残ってしまった状態になってしまっています。

該当のソースコード

table, tr, th, td {
    border: 1px solid #cccccc;
}

table {
    width: 100%;
    table-layout: fixed;
}

th {
    width: 26%;
    padding: 10px 2%;
}

td {
    width: 66%;
    padding: 10px 2%;
}



#top_list table, th, td {
    border: none;
}

試したこと

・順番を入れ替えた
・枠線の色を変えてみた
どちらもうまくいきませんでした。

このようなtable全体でのCSSを設定した状態で、特定のtableにだけ別のCSSを当てることは可能でしょうか？
詳しい方いらっしゃいましたらご教授ください。

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

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

ご提示のコードのルールは、この順番で書かれていますか？

[ataru2222]

ありがとうございます。
並び替えをしてみましたが、現在はこの順番で書いております。

[Lhankor_Mhy]

当方の環境では問題が再現しませんでした。

ご提示いただいていない部分（HTMLとか）に原因があると思われます。

なお、
#top_list table, th, td
は、
#top_list table, #top_list th, #top_list td
の間違いではないかな、と感じていますので、ご確認ください。

[ataru2222]

できました！！
https://step-learn.com/article/html-css/030-table-border-none.html
こちらのサイトを参考にして書いていたのですが、そもそもしっかり1行1行を指定しないと当たらないのですね！

ちなみに現在修正依頼の場所に書いているのですが、同じ悩みに当たる人が居ると思いますので、回答欄に上の投稿コピーしていただいてもよろしいですか？

[Lhankor_Mhy]

その部分だけが原因ではなかったと思いますので、お手数ですが自己解決の処理をしていただいてよろしいでしょうか？

[ataru2222]

かしこまりました。
回答していただきまして、本当にありがとうございました。

Answer 1

https://step-learn.com/article/html-css/030-table-border-none.html
こちらのサイトを見ながらCSSを当てていたのですが、

Lhankor_Mhyさんがご指摘していただいたとおり

#top_list table, th, td {
}

ではなく、

#top_list table, #top_list th, #top_list td {
}

とひとつひとつの項目にid名を指定してあげることでCSSを当てることができました。

回答してくださった方、本当にありがとうございました。

Answer 2

cssは基本後勝ちなのでその特定のtableとやらにclassで命名でもして、と思いましたが
既にやってるならわからんなぁ。

ちょっと文章だけだと何が残ってるかわからない。

あれだったらChromeのデベロッパーツールでなぜ外の線と行の線が
有効になってるか見た方が良いかもしれない。

追記
border:noneは周りが影響している場合は他の値が優先されるのでそのせいかもしれないです。
border:hiddenでいいかも。

Comments

[ataru2222]

回答していただき、ありがとうございます。
一番上の
border: 1px solid #cccccc;
こちらを6pxに変えてみたところ太くなったので、こいつが関与してそうですが
デベロッパーツールで要素を調査してみます。

ありがとうございました。

[K_3578]

細かいですが、解答じゃなくて回答です。
解答だと問題に対しての解になってしまうので･･･。(私の回答が唯一解と思って欲しくない)

思ったことがあったので回答追記しました。

[ataru2222]

回答修正しておきました。

hiddenでthの縦の線だけが残る状態に
しかし、
#top_list table, th, td {
border: hidden;
}

#top_listと指定しているにも関わらず、他の表全体にも当たってしまっていることが確認できました。
やはり個別に１つ１つ設定していったほうが良いのでしょうか？

[K_3578]

>回答修正しておきました。
すいません、感謝します。

よく分かりませんが、もしかしてIDを1ページ内で
複数使ってたりとかしないですか？

[ataru2222]

同じ名前のidは1つだけでした。
もう少し自分でも調べてダメなら、全体設定を外して個別設定していきます。

[K_3578]

htmlのコード上げて貰えればもう少し分かるかなとは思います。