web-dev-qa-db-ja.com

CSSとネストされたテーブル

他の複数のテーブルを含むhtmlテーブルがあります。私の問題は、内側のテーブルが外側のテーブルと同じルールを継承することです。

外のテーブルのルールを乗り越える方法はありますか?私は基本的に内側のテーブルに伝えたいです:

こんにちは、あなたの名前は「X」です。外側のテーブルとそのルールをすべて忘れてほしい。これらの他の特定のルールを守ってほしい。

HTML/CSSでそれを実現する方法はありますか?例?

18
codingJoe
table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}

これにより、選択したテーブルの直接の子だけが含まれ、ネストされたテーブルの子はスタイルを受け取りません。

21

最も簡単な方法はクラスとIDです。必ず要素を使用してください。

table.outter { some: style; } /* class */  
table#inner { some: style; } /* id */  

使用することもできます

table { some: style; }  
table table { some: style; } /* override outter table */  

または2つを組み合わせる

table.outter { some: style; } /* class */  
table.outter table#inner { some: style; } /* id */  

お役に立てれば。

0
jimminySnippet