Question

I have a simple page with two tables called table-a and table-b:

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

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

and I use the following css to style the appearance of these 2 tables:

#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;
}

The problem is that the padding-left: 5px; of table-b is also applied to the first table table-a.

How does this happen and how do I prevent it from happening?

I really can’t figure out how to solve this problem :(…

I thought that by using the following, only those elements are influenced that are “within” table-b and not those within table-a:

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

Any help is appreciated.

Answer 1

Your second selector #table-b td, tr, th {...] selects ALL of the td, tr and ths within the document. You have to prepend the table selector to each one:

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

Also prepend the #table-a to the other selectors as well.