CSS to get <th> of current <td>?

Question

I'm trying to highlight the <th> of the <td> that am currently hovering.

I can highlight the first <tr> using:

#sheet tr:hover td:first-child { color:#000; background:#EAEAEA; }

Is there a way to do this for the <th>?

Note - I am using scopes for the <th>, like this <th scope="col">, can I utilize this?

Note 2 - Or, is there a way to get the current column?

Answer 1

As others have pointed out, this is not currently possible with just CSS. But, just as a coding exercise I tried out rotating the table with css transforms and then "unrotating" the cells, so your first child ends up being the column header...

.container {
  float: left;
  -webkit-transform: rotate(90deg) translate(-240px, -260px);
  -moz-transform: rotate(90deg) translate(-240px, -260px);
  -o-transform: rotate(90deg) translate(-240px, -260px);
  -ms-transform: rotate(90deg) translate(-240px, -260px);
  transform: rotate(90deg) translate(-240px, -260px);
  color: #333;
}

table td, table th {
  border: solid #eee 1px;
  padding: 10px;
}

table tr:hover th:first-child { color:#000; background:#EAEAEA; }
table tr:hover td { color:#000;}

table th {
  font-weight: bold;
}

table th, table td {
  height: 200px;
  width: 20px;
}

table th span, table td span {
    display: block;
    position: absolute;
    -webkit-transform: rotate(-90deg) translate(-100px, 0);
    -webkit-transform-origin: top left;
    -moz-transform: rotate(-90deg) translate(-100px, 0);
    -moz-transform-origin: top left;
    -o-transform: rotate(-90deg) translate(-100px, 0);
    -o-transform-origin: top left;
    -ms-transform: rotate(-90deg) translate(-100px, 0);
    -ms-transform-origin: top left;
    transform: rotate(-90deg) translate(-100px, 0);
    transform-origin: top left;
}

view demo in jsfiddle

This of course is just for fun and should never find its way into production. You have to add a lot of markup because many browsers go bonkers if you try to transform table cells.

In theory this should be more reliable with writing-mode, but currently it's only supported by IE9+. It would look something like...

table {
  writing-mode: TB-LR;
}

table td, table th {
  writing-mode: LR-TB;
}

Answer 2

Here's a JavaScript solution. I know you really want a CSS only answer to this, but since that's not possible I've tried to keep as much in the CSS as possible:

First your table needs to have colgroups. One for each column.

<table class="coltest">
    <colgroup><col/><col/></colgroup>
    <thead><td>Left</td><td>Right</td></thead>    
    <tbody>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
    </tbody>
</table>

I've also declared some simple CSS to attach to our col when hovered:

.colhover {
  background-color: yellow;
}

And finally the jQuery to fire on hover:

$("table.coltest td").hover(function() {
    // get the colgroup at this elements specific index (col1, col2, etc)
    $("col").eq($(this).index()).addClass('colhover');
}, function() {
    $("col").eq($(this).index()).removeClass('colhover');
});

This event fires when the mouse hovers over a td, making the entire colgroup that td is part of yellow.

You can see an example at the jsfiddle here.