1

とという2つのテーブルがある単純なページがtable-aありtable-bます。

<table id="table-a">
    ...
</table>

<table id="table-b">
    ...
</table>

そして、次のcssを使用して、これら2つのテーブルの外観をスタイル設定します。

#table-a {
    width: 100%;
}

#table-a td, tr, th {
    border: 1px solid #000000;
}

#table-b {
    width: 100%;
}

#table-b td, tr, th {
    border: 1px solid #000000;
    padding-left: 5px;
}

問題は、padding-left: 5px;oftable-bが最初のテーブルにも適用されることtable-aです。

これはどのように発生し、どうすれば発生を防ぐことができますか？

私は本当にこの問題を解決する方法を理解することができません：（...

以下を使用することで、「内」にある要素のみが影響を受け、内にある要素は影響を受けないと思いましtable-bたtable-a。

#table-b td, tr, th {
    /* ... */
}

どんな助けでも大歓迎です。

4

3 に答える 3

3

2番目のセレクター#table-b td, tr, th {...]は、ドキュメント内のすべてのtd、tr、およびthsを選択します。それぞれの前にテーブルセレクターを追加する必要があります。

#table-b td, 
#table-b tr, 
#table-b th {...]

また#table-a、他のセレクターにもを追加します。

于 2012-10-02T09:18:38.033 に答える
2 
...tr, th {
   border: 1px solid #000000;
   padding-left: 5px;
}

これは、すべてのテーブルの行とヘッダーに適用されます。

＃table-aのルールを適用する場合は、trとthの前にテーブルIDを指定する必要があります。

#table-a td, #table-a tr, #table-a th {
   border: 1px solid #000000;
   padding-left: 5px;
}
于 2012-10-02T09:19:01.823 に答える
1

これを試してください：これ#table-b td, #table-b tr, #table-b thの代わりに#table-b td, tr, th。お使いのバージョンでは、セレクターが＃table-b td AND thANDtrに適用されます

于 2012-10-02T09:22:08.223 に答える