I'm trying to create a table to display an individual's BMI.
As part of this, I'd like, on :hover, for the <tr>
and <col>
(or <colgroup>
) to be highlighted also, in order for the intersection to be more apparent.
As the table will feature both metric and imperial measurements, the :hover doesn't have to stop at the cell (from any direction) and would, in fact, be a bonus if it extended from one axis to the other. I'm also using the XHTML 1.1 Strict doctype, if this makes a difference?
So...an example (the real table's...larger), but this should be representative:
<script>
tr:hover {background-color: #ffa; }
colgroup:hover,
col:hover {background-color: #ffa; }
</script>
...
<table>
<col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
</tr>
<tr>
<td>160cm</td>
<td>20</td>
<td>21</td>
<td>23</td>
</tr>
<tr>
<td>165cm</td>
<td>18</td>
<td>20</td>
<td>22</td>
</tr>
<tr>
<td>170cm</td>
<td>17</td>
<td>19</td>
<td>21</td>
</tr>
</table>
Am I asking the impossible, do I need to go JQuery-wards?
-
AFAIK CSS Hovers on
TR
's aren't supported in IE anyway, so at best the TR part of that will only work in Firefox.Never even seen a
:hover
work on a col/colgroup so not sure if that's possible...Think you might be stuck with a Javascript implementation.
Theres an example here that works (rows & cols) in Firefox but again its broken in IE... cols don't work.
David Thomas : That's definitely consistent with my experiences, if not quite the miracle I was hoping for... =)Kezzer : Depends on the doctype and the version. works in IE7 anyway.Nick Presta : The :hover state will not only work in Firefox, but every other major non-IE browser (Opera, Konqueror, Safari, et al). -
There is a very decent jQuery plugin I've come across located here which does a very good job of this kind of thing with loads of examples. Preferentially I'd use that.
David Thomas : Wouldn't it be nice, though, to be able to use CSS as it should -in my imagination be able to- be used? =) I'll check out the JQuery, thanks for that!Chad Scira : thats hover madness! +1
0 comments:
Post a Comment