Select table rows without table headers using css selector

Question

Using css selector how am i supposed to write a selector so that only table rows that have data display cursor as pointer. I tried below but nope

table tbody tr:not(tr>th)

is this cross browser and works event in IE6?

Routh

Answer 1

That is not a valid CSS selector; you can't put combinators inside :not().

Your best bet is to put header rows (i.e. <tr> elements that contain <th> elements) inside a <thead>, leave the rest of the rows in your table's <tbody>, and simply use this:

table tbody tr {
    cursor: pointer;
}

If you can't modify your HTML, it's not possible with CSS selectors alone, especially not with your requirement of supporting IE6. Use JavaScript instead; here's an obligatory jQuery example:

$('table tbody tr:not(:has(th))').css('cursor', 'pointer');

Digester

@Digester since we are using the styles for Gridview (a asp.net control) we got pretty much no choice ;( they don't render th inside thead – Routh

@Deeptechtons: Then I'm afraid you won't get anywhere with CSS selectors, especially not with IE6 support. See my edit. – Digester

Answer 2

Assuming that your header row will always be the first row, you could do this:

table tr:not(:first-child) {
    background:red;
}​

This selects all tr elements except the first-child (as in, the first of the matched elements).

This does not work in IE6 or any other version of IE except IE9.

But yes, if you do require IE6 support, Javascript must be used.

Honan

You can cater for IE7 and IE8 using table tr + tr instead, but IE6 is beyond reach. – Digester

Answer 3

you can do it using <thead> tag.

In my case table looks like:

<table>
  <thead> <tr><th>... </thead>
  <tbody> <tr><td>... </tbody>
</table>

this will be applied for all tables:

tbody tr{
      background: yellow;
}

this is only for tables which has header:

thead+tbody tr{
      background: red;
}

Said

Answer 4

Basically I tried solutions above but in my case I wrote something different to make it works. I don't know if it's better to use :hover or not for cursor.

table tbody>tr:hover {
   cursor: pointer;
}

In my case table is coded like that

<table>
  <thead>
    <tr>...</tr>
     ....
  </thead>
  <tbody>
   <tr>...</tr>
    ...
</table>

At all, I wanted to add style to entire line and not tr themselves

Afro