Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apply style to cells of first row

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; } 
like image 478
xperator Avatar asked May 04 '12 13:05

xperator


People also ask

How do you select the first row in CSS?

The ::first-line selector is used to add a style to the first line of the specified selector. Note: The following properties can be used with ::first-line: font properties. color properties.

How do you select the first table in CSS?

Use first-child for table inside . openDiv . Updated fiddle is here. first-of-type represents the first sibling of its type in the list of children of its parent element, first-child represents any element that is the first child element of its parent.

How do you select the first TR in a table?

You could also have table > thead > tr and then table > tbody > tr. So you might need to specify whether you want the first row from the thead or the tbody. find('tr:first') will select the tr in the thead.


2 Answers

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; } 
like image 187
BoltClock Avatar answered Sep 22 '22 19:09

BoltClock


This should do the work:

.category_table tr:first-child td {     vertical-align: top; } 
like image 42
Simone Avatar answered Sep 20 '22 19:09

Simone