19

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Cody
  • 8,686
  • 18
  • 71
  • 126
  • 3
    Not possible, I think, without JavaScript. Though I'd be fascinated to be proven wrong. – David Thomas Feb 02 '12 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 `` and `` doesn't seem to work with `:hover`. – Blazemonger Feb 02 '12 at 18:50
  • possible duplicate of [html: hover table column](http://stackoverflow.com/questions/1553571/html-hover-table-column) – Blazemonger Feb 02 '12 at 18:50
  • 1
    Check out this: [jQuery tableHover](http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html). (from an answer to the [html: hover table column](http://stackoverflow.com/questions/1553571/html-hover-table-column) question mentioned by mblase75). example 5 is probably interesting to you. – DwB Feb 02 '12 at 18:56
  • I know I can do it using javascript, but I prefer to use CSS only for styling, when possible. – Cody Feb 02 '12 at 19:04
  • What about using js to apply a class to the th? That way you define the style in your css but handle the behavior in your js. You still keep separation of presentation and behavior. – Alex Morales Feb 03 '12 at 03:07
  • @Alex Morales: No it does not. It applies the style to the `td`. – BoltClock Feb 11 '12 at 18:48
  • Ahh, you would be correct Bolt, I misread the description. I deleted the comment to avoid any confusion. – Alex Morales Feb 13 '12 at 13:05
  • "The th of the td", which th, is it on the same line/column ? Could you paste an HTML snippet ? – sinsedrix Feb 13 '12 at 14:57
  • 1
    When CSS4 is supported, you will be able to use `$td` to select the parent element: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Polynomial Feb 13 '12 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 '12 at 15:30

6 Answers6

10

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
methodofaction
  • 70,885
  • 21
  • 151
  • 164
9

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jivings
  • 22,834
  • 6
  • 60
  • 101
  • 1
    I think you meant to use ``, not ``. – BoltClock Feb 11 '12 at 17:02
  • Why do you say that? Did you take a look at the jsfiddle? – Jivings Feb 11 '12 at 17:03
  • 1
    The fiddle isn't relevant - you're referencing individual columns, not groups of columns, so semantically speaking, `` isn't the right element to use. – BoltClock Feb 11 '12 at 17:06
  • Okay, point taken thanks. Edited my answer, is this the proper method? – Jivings Feb 11 '12 at 17:11
  • Thanks @BoltClock. I haven't used either element much before TBH. – Jivings Feb 11 '12 at 17:13
  • Some improvements. Use only the col in the table, were the hover ist : `$('col', $(this).closest('table')).eq($(this).index()).addClass('colhover')` – yunzen Feb 13 '12 at 11:32
  • Is there a specific reason you would want to use BOTH `col` and `colgroup` like that? It works fine using only `col`. – Cody Feb 13 '12 at 20:25
  • Also, what if I wanted to only highlight the header / footer cell, and not the entire column? – Cody Feb 13 '12 at 20:27
  • A colgroup is always implied. See: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4 – Jivings Feb 13 '12 at 20:42
  • Your second comment is a whole new question :) Header would be easy, just apply the style to the `td` in the `thead`, not sure about footer cell. – Jivings Feb 13 '12 at 20:43
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/

Judah
  • 106
  • 8
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/

Tracy Fu
  • 1,632
  • 12
  • 22
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.

Michal B.
  • 5,676
  • 6
  • 42
  • 70
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?

Community
  • 1
  • 1
dader
  • 1,304
  • 1
  • 12
  • 31
  • 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 '12 at 17:09