Apply style to cells of first row

HtmlCssCss SelectorsHtml Table

Html Problem Overview


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;
}

Html Solutions


Solution 1 - Html

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;
}

Solution 2 - Html

This should do the work:

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

Solution 3 - Html

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;
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionxperatorView Question on Stackoverflow
Solution 1 - HtmlBoltClockView Answer on Stackoverflow
Solution 2 - HtmlSimoneView Answer on Stackoverflow
Solution 3 - HtmlVikas KumarView Answer on Stackoverflow