CODEWITHSUNDEEP
htmlcss
Mark Micallef
Mark Micallef

Reputation: 2788

CSS styling for all cells in a table

I want to apply a style to all cells (td elements) inside a given table, and not any other tables. Is there a way to do this in CSS without having to specify a class for each td in the table I want to apply the style to?

For example, let's say I want to make all cells in a particular table have a padding of 3px on all four edges. To do this for every td I could declare:

td { padding: 3px 3px 3px 3px; }

Problem: this applies to every single td on the page. I just want to apply to this a single, named table, or alternatively, to all tables of a given class.

Any ideas?

Upvotes: 1

Views: 5205

Answers (4)

Sagar V
Sagar V

Reputation: 12478

Use This. td.tbl_class{your style;}

Upvotes: 0

rgoraya
rgoraya

Reputation: 241

As others have answered, having the td element's styles declared as a descendant selector (learn more here) or a child selector (learn more here) belonging to a parent selector, instead of declaring them without the hierarchy would solve your problem.

The only thing I'd like to add is that the descendant and child selectors operate with a slight difference as mentioned below in the comments below: 

.my_table_class td { padding: 3px; } // will apply to all td elements underneath
                                     // .my-table-class (also to tables nested
                                     // below)


.my_table_class > td { padding: 3px; } // will apply to td elements immediately
                                       // under .my-table-class

Upvotes: 2

Abdul Malik
Abdul Malik

Reputation: 2642

add class to or id to table that you want to target for example

.yourTableClass td{Your Style here}

Upvotes: 1

TGH
TGH

Reputation: 39248

#someTable td { padding: 3px 3px 3px 3px; }

This will apply your style to only a specific table

.someTable td { padding: 3px 3px 3px 3px; }

This will apply the change to all tables with the given class

Upvotes: 8

Related Questions