Style the first td column of a table differently

Question

If I have a table with two columns  how do I specify a padding or any other css so that it is applied just for the first column of  lt td gt s  Also how do I style an n-th column similarly

User · Answer

The  nth-child   and  nth-of-type   pseudo-classes allows you to select elements with a formula   The syntax is  nth-child an b   where you replace a and b by numbers of your choice    For instance   nth-child 3n 1  selects the 1st  4th  7th etc  child   td nth-child 3n 1           your stuff here         nth-of-type   works the same  except that it only considers element of the given type   in the example

User · Answer

To select the first column of a table you can use this syntax  tr td nth-child 1n   2     padding-left  10px

User · Answer

You could use the n-th child selector   to target the nth element you could then use   td nth-child n           your stuff here         where n starts at 1

User · Answer

This should help  Its CSS3  first-child where you should say that the first tr of the table you would like to style  http   reference sitepoint com css pseudoclass-firstchild

User · Answer

If you ve to support IE7  a more compatible solution is      only the cells with no cell before  aka the first one     td       padding-left  20px       only the cells with at least one cell before  aka all except the first one     td   td       padding-left  0      Also works fine with li  general sibling selector   may be more suitable with mixed elements like a heading h1 followed by paragraphs AND a subheading and then again other paragraphs

[css] Style the first <td> column of a table differently

Examples related to css

Examples related to css-selectors

Examples related to padding