CODEWITHSUNDEEP
htmlcss
siren_dev
siren_dev

Reputation: 111

Change the color of all the td inside a table class in CSS

I am trying to select all the bottom borders inside a table, and turn them gray, without having to assign a class to each td. So far what I have come up with is this, but it does not work:

table.items {
    border: 1px solid #42536f;
}

table.items > td {
    border-bottom: 1px solid #CCC;
}

Basically, I want to be able to just use the "items" class for the entire table, and have all the bottom borders show up gray, and the outside border show up that dark blueish color I chose.

Any suggestions?

Thank you :-)

Upvotes: 9

Views: 35369

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115212

td is not the direct child of the table

table.items{ 
    border:1px solid #42536f;
}
table.items td{ 
    border-bottom:1px solid #CCC;
}

Here all td elements inside the table will select.

or

table.items{
    border:1px solid #42536f;
}
table.items tr>td{
    border-bottom:1px solid #CCC;
}

In this case td is direct child of tr.

Upvotes: 15

user3178594
user3178594

Reputation: 33

table.items td or table.items > tr > td will do the required job as suggested by others already.

But, may be.. giving border-bottom to rows instead of cells.. i.e, giving it to table.items > tr will give a better look. I am not sure if that is what you are looking for :)

Upvotes: 2

Moni
Moni

Reputation: 189

With table.items > td you say:

Every td that is a direct child of table.items

which is never given, because there's always a <tr> between.

Try using table.items td (like Pranav Ram suggested)!

Upvotes: 1

Related Questions