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?
Style the first column of a table differently
Asked
Active
Viewed 1.1e+01k times
79
-
1
http://quirksmode.org/css/selectors/firstchild.html - http://quirksmode.org/css/selectors/nthchild.html
– techfoobar
Mar 28 '13 at 05:52
5 Answers
167
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)
-
23
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
-
16
11
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.
FelipeAls
- 20,411
- 7
- 49
- 71
9
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).
MS Ibrahim
- 1,731
- 1
- 14
- 27
4
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
tiantang
- 396
- 1
- 5
- 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
1
To select the first column of a table you can use this syntax
tr td:nth-child(1n + 2){
padding-left: 10px;
}
Duck
- 32,792
- 46
- 221
- 426
Saptarshi Banerjee
- 11
- 1
-
1http://quirksmode.org/css/selectors/firstchild.html - http://quirksmode.org/css/selectors/nthchild.html – techfoobar Mar 28 '13 at 05:52
5 Answers
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)
-
23Suggest 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
-
6Yes, for the first element, `first-child` is better. But OP asked for both :) – RRikesh Mar 28 '13 at 06:08
-
16
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.
- 20,411
- 7
- 49
- 71
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).
- 1,731
- 1
- 14
- 27
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
- 396
- 1
- 5
- 14
-
3Also 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
To select the first column of a table you can use this syntax
tr td:nth-child(1n + 2){
padding-left: 10px;
}
- 32,792
- 46
- 221
- 426
- 11
- 1