97

It should be very simple but I can't figure it out.

I have a table like this :

<table class="category_table">
 <tr><td> blabla 1</td><td> blabla 2 </td></tr>
 <tr><td> blabla 3 </td><td> blabla 4 </td></tr>
</table>

I want to make td tags of first tr row have vertical-align. But not the second row.

.category_table td{
    vertical-align:top;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
xperator
  • 2,743
  • 7
  • 34
  • 58

3 Answers3

202

Use tr:first-child to take the first tr:

.category_table tr:first-child td {
    vertical-align: top;
}

If you have nested tables, and you don't want to apply styles to the inner rows, add some child selectors so only the top-level tds in the first top-level tr get the styles:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Actually I tried this before, It's not working. Not sure why. – xperator May 04 '12 at 13:57
  • 2
    I don't know either. I have 100% confidence that this works for all major browsers. – BoltClock May 04 '12 at 13:58
  • When I compare `td` tags of first and second row in FireBug, I can see the first row Inherited the style but the second row has not. I don't know why the second row is vertically aligned !? – xperator May 04 '12 at 14:00
  • Then it's probably a default style. I'm not familiar with default table styles. – BoltClock May 04 '12 at 14:02
  • I have gone a little deeper with FireBug. I think I found the problem. Actually inside my `td` tags of second row, I have table in there. It seems the table inside cells of second row Inherited the style. – xperator May 04 '12 at 14:06
  • ... and this is why you need to show complete code samples and not miss any important details. Try my updated answer. – BoltClock May 04 '12 at 14:08
  • Sorry for that. I will keep that in mind. OK I tried your Updated answer but none of `td`s are v-aligned anymore. If you wish I can show the full code. I am just worried that you will get confused. Because the lang is not english too. – xperator May 04 '12 at 14:15
  • Found the culprit. I should have added a `tbody` before `> tr:first-child`. Thanks a lot. – xperator May 04 '12 at 14:25
  • Oh, I missed that, sorry. See [this answer](http://stackoverflow.com/a/5568877/106224) for an explanation. – BoltClock May 04 '12 at 14:29
  • @Konstantin Pereyaslov: If your HTML doesn't match what the OP has, that's the first place to look. – BoltClock Jun 07 '13 at 10:31
  • @BoltClock yes it turns out it works fine, I wanted to match first column, not first row so I had to use `:first child` after `td`, not `tr`, totally my bad (deleting original comment now) – Konstantin Pereiaslov Jun 07 '13 at 14:38
  • @Konstantin Pereyaslov: Ah. Glad you solved it then! Also, I noticed a downvote that coincided with your comment - if it was yours, feel free to remove it as I've edited my post. – BoltClock Jun 07 '13 at 14:44
  • `:first-child` is better or `:nth-child(1)`? Which one is better in old browsers? – Shafizadeh Oct 26 '15 at 18:40
  • 1
    @Sajad: `:first-child` is better. However if you have styles that depend on other `:nth-child()` values, use `:nth-child(1)` so it degrades consistently. (I might post a self-answered question about this.) – BoltClock Oct 27 '15 at 03:54
3

This should do the work:

.category_table tr:first-child td {
    vertical-align: top;
}
Simone
  • 20,302
  • 14
  • 79
  • 103
-2

Below works for first tr of the table under thead 

table thead tr:first-child {
   background: #f2f2f2;
}

And this works for the first tr of thead and tbody both:

table thead tbody tr:first-child {
   background: #f2f2f2;
}
Vikas Kumar
  • 205
  • 2
  • 9