Style the first 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 <td>s. Also how do I style an n-th column similarly?

http://quirksmode.org/css/selectors/firstchild.html - http://quirksmode.org/css/selectors/nthchild.html — techfoobar, Mar 28 '13 at 05:52

score 206 · Accepted Answer · edited Nov 23 '18 at 16:26

206

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)

edited Nov 23 '18 at 16:26

Dan

5,692
3
35
66

answered Mar 28 '13 at 05:57

RRikesh

14,112
5
49
70

26

Suggest td:first-child over this mostly because it has more support for older IE versions. If browser support isn't an issue nth-child is a powerful selector to begin using. – lukek Mar 28 '13 at 06:05
6

Yes, for the first element, `first-child` is better. But OP asked for both :) – RRikesh Mar 28 '13 at 06:08
21

And `n` start with 1, not with 0. – robsch Oct 28 '15 at 15:56
But if the first `td` of previous `tr` has a rowspan greater than 1, `first-child` will mis-select a 2nd-column `td`. Any trick to solve this? – Frozen Flame Jul 01 '23 at 01:59

score 14 · Answer 2 · answered Mar 28 '13 at 06:02

14

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.

answered Mar 28 '13 at 06:02

FelipeAls

21,711
8
54
74

Simple, easy to read and works a treat! – stemixrf Mar 06 '23 at 11:06
This actually worked for me, where nth-child and first-child did not (perhaps due to cascading rules? *shrug*) – Brian A. Henning Mar 09 '23 at 16:18

score 13 · Answer 3 · edited Feb 18 '22 at 01:58

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).

For more information about nth-child https://developer.mozilla.org/es/docs/Web/CSS/:nth-child

score 5 · Answer 4 · answered Mar 28 '13 at 05:52

5

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

answered Mar 28 '13 at 05:52

tiantang

406
1
7
14

3

Also if you would like to only style the first `tr` of a specific table you could put `.tableclass tr:first-child` or `#tableid tr:first-child` – tiantang Mar 28 '13 at 05:56
1

`:first-child` isn't new to CSS3. – BoltClock Mar 28 '13 at 10:57

score 1 · Answer 5 · edited May 25 '20 at 16:36

1

To select the first column of a table you can use this syntax

tr td:nth-child(1n + 2){
  padding-left: 10px;
}

edited May 25 '20 at 16:36

Duck

34,902
47
248
470

answered May 31 '17 at 09:50

Saptarshi Banerjee

11
1

Style the first column of a table differently

5 Answers5

Linked