Select table rows without table headers using css selector - css

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?

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');

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.

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

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