1

我有一个简单的页面,其中有两个名为table-aand的表table-b

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

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

我使用以下 css 来设置这两个表的外观:

#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

您的第二个选择器#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而不是 this #table-b td, tr, th。您的版本将选择器应用于 #table-b td AND th AND tr

于 2012-10-02T09:22:08.223 回答