20

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?

11
  • 3
    Not possible, I think, without JavaScript. Though I'd be fascinated to be proven wrong. Feb 2, 2012 at 18:50
  • Is JavaScript an option for you? Since table cells are organized by rows in the DOM, there doesn't appear to be a way to select other cells in the same column using CSS. Even using <colgroup> and <col> doesn't seem to work with :hover. Feb 2, 2012 at 18:50
  • 1
    Check out this: jQuery tableHover. (from an answer to the html: hover table column question mentioned by mblase75). example 5 is probably interesting to you.
    – DwB
    Feb 2, 2012 at 18:56
  • 1
    When CSS4 is supported, you will be able to use $td to select the parent element: stackoverflow.com/questions/1014861/…
    – Polynomial
    Feb 13, 2012 at 16:52
  • 1
    @Polynomial: That selects the td, not its parent tr. And as of January 2012, it's tr!, not $tr. The working group may very well settle for a different symbol in the later months if things get complicated.
    – BoltClock
    Feb 16, 2012 at 15:30

6 Answers 6

11

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;
}
2
  • 4
    LOL this is a completely wicked approach to the issue. I like it though, as a proof of concept. :)
    – Bazzz
    Feb 13, 2012 at 13:03
  • 2
    Programmers on crack: The HTML story.
    – cwharris
    Feb 13, 2012 at 14:55
9
+50

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.

10
  • 1
    I think you meant to use <col>, not <colgroup>.
    – BoltClock
    Feb 11, 2012 at 17:02
  • Why do you say that? Did you take a look at the jsfiddle?
    – Jivings
    Feb 11, 2012 at 17:03
  • 1
    The fiddle isn't relevant - you're referencing individual columns, not groups of columns, so semantically speaking, <colgroup> isn't the right element to use.
    – BoltClock
    Feb 11, 2012 at 17:06
  • Okay, point taken thanks. Edited my answer, is this the proper method?
    – Jivings
    Feb 11, 2012 at 17:11
  • Thanks @BoltClock. I haven't used either element much before TBH.
    – Jivings
    Feb 11, 2012 at 17:13
2

AFAIK it's not possible using CSS alone. You might be interested in this, although it looks like the jQuery plugin referenced in the comments is more robust.

http://css-tricks.com/row-and-column-highlighting/

2

Judah is right that this isn't possible with CSS alone. The reason is that you want to target the child of a parent sibling and there is currently no way to target parents using CSS selectors.

Here's a solution using jQuery that is similar to Jivings example except that it uses your <th> tags (instead of colgroups) and only highlights the <th> instead of the whole column. The second bit of JS outputs which column you're hovering.

http://jsfiddle.net/tracyfu/Xhs4N/

2

There is no way to go up the tree using CSS, only horizontally and vertically downward. Here you have all selectors you can use: http://www.w3.org/TR/css3-selectors/. Nothing goes up the tree...Hope the source is credible enough ;).

Unfortunately, js is your only solution.

1

As said above, there is no way to "select" parents in CSS.

The CSS4 spec provides a feature for defining the subject of a selector (which allows you to match a parent). But even with this new feature, your demand is still too complex, and the only way to achieve it, is using JavaScript.

More information on that here:

Is there a CSS parent selector?

1
  • 5
    Actually, with CSS4 selectors (as of the January 2012 ED anyway), it's as simple as th:column(td:hover). No need for the subject selector or :matches(), or JavaScript at all!
    – BoltClock
    Feb 11, 2012 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.