如何在CSS中设置表格的整个第一行的样式

Question

I wanted to know if there's a way to style (background, text, hover effect) the entire first row of a table? I have tried a lot but nothing works. I tried this one too:

.category_table td{
background: #000;
color: #fff;
font-weight: bold;}

but nothing works. Can somebody please help me out on this?

Answer 1

You said it yourself, the first ROW, so that is what you need to target.

.category_table tbody tr:first-child td { /* styles for first row's cells */ }

(I've assumed your table has a tbody ; if not, remove this part of the selector.)

Answer 2

You'll probably have to do this:

HTML:

<table><tr class="row1">

<td>Something</td>

<td>Somthing</td>

</tr><tr>

<td>Something</td>

<td>Somthing</td>

</tr></table>

CSS:

.row { /*Style the  1st row*/

}
.row td { /*style each <td> in the 1st row*/

}

Answer 3

If you want best browser compatibility add a class to the row. If you only care about newer browsers then you can use the tr:first-child selector

See this pen for more

In the above link, you'll notice styles being applied from both in modern browsers. If you view in an old browser (eg IE6) then only the colouring styles will take effect the font-size selector wont as its an unsupported selector. If you only want to target new browsers then the first-child doesn't require any changes to your HTML which may or may not be an issue

Answer 4

In the general case, you need to select the first child of the first thead or tbody child of the table:

thead:first-of-type > :first-child,
tbody:first-of-type > :first-child {
  font-weight: bold; /* or whatever you want to set */
}

The simpler selector tr:first-child works in simple cases where the table element contains only one tbody element as a child (which is the case when you write just tr elements inside it – a single tbody is then implied). But in general, a table may contain a thead element, a tfoot element, and several tbody elements.

Note: If there is no thead element and there is a tfoot element in markup before the tbody element(s), it is debatable whether the first tr in the tfoot element is the first row. In markup it is, but it is rendered last (in default rendering). I have interpreted that tfoot elements are to be ignored in this issue.

Support to the CSS selectors used here is good but not universal. For support in all CSS-enabled browsers, add a class attribute to the first tr element, eg <tr class=first> , and use a class selector, eg .first .