Ideas for table row outline on hover? CSS outline fails on tr in Webkit
I'm trying to build a table (filled with actual tabular data), and get an outline effect for a row on hover. I've tried a couple ideas, but cross-browser issues are holding me back. Would love to hear any ideas.
Idea #1: Add CSS outline
when hovering over <tr>. Works in IE8 & FF3, but not IE7 or Chrome (Webkit, so probably Safari too). The actual implementation of the hover is omitted for brevity:
<table style="margin:10px;width:800px">
<tbody>
<tr style="outline:red solid 3px">
<td>Test 1</td>
<td>Test 2</td>
</tr>
</tbody>
</table>
Idea #2: Position a <div> under the <tr> that is wider/taller than the <tr>, and use z-index
to stack the <div> below the <tr>, but on top of adjacent <tr>s. This is much more interesting, because I can potentially do rounded corners, opacity, etc. This looked promising, but so do many ideas when impleme开发者_开发技巧nted first in Firefox. After reading up on z-index
and playing around with code in several different browsers, I'm totally frustrated. The stacking/ordering I'm trying here is maybe too complex to work in different browsers.
Example code using jquery-ui and Position (http://wiki.jqueryui.com/Position):
[non-working code link removed]
EDIT: Super awesome slightly kludgish solution below including opacity and rounded corners in all but IE. I'll have to do a blog writeup one of these days on all the little issues.
2 sounds terribly complicated. How about this:
tr:hover td{ outline: red solid 3px}
EDIT
Try this:
<script type="text/javascript">
$(document).ready(function(){
$("tr").hover(
function(){
$(this).css({"outline":"red solid 3px"});
},
function(){
$(this).css({"outline":"red solid 0px"});
}
);
});
</script>
Whoops.. this still fails in webkit.
EDIT
OK, try again...
Webkit honours the TR OUTLINE if you give the TR "display:block", so, the following works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
}
tr {
outline-color: #f00;
outline-style: solid;
outline-width: 0px;
display: block
}
.thick {
outline-width:3px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("td").hover(
function(){
$(this).parent().addClass("thick");
},
function(){
$(this).parent().removeClass("thick");
}
);
});
</script>
</head>
<body>
<table style="margin:10px;width:800px">
<tbody>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test 4</td>
</tr>
</tbody>
</table>
</body>
</html>
I made idea #2 work, which I think is pretty nifty. Several tricks had to be used. First, block elements had to be put inside td
elements in order to get z-index
working in several browsers. I used span
elements with display:block
to fill the entire td
, which means some td
css properties will have to be put inside those span
elements and further nested but not yet added span
elements (borders and padding in particular).
I added some opacity and rounded corners (no rounded corners in IE). Feel free to comment if you have suggestions for improvements.
See the code working at: http://davidmarble.com/code/tr-hover-highlight.html
This is the solution I came up with after asking my own question on SO - Outline table row on hover
What you do is remove the bottom border for all of the td's with bottom-border: 0
. The top borders of the other cells will keep everything looking the way they should, except for the last row. The last row we fix with tr:last-child td { bottom-border: your border style }
. Finally in your hover pseudoclass you set the bottom border.
http://jsfiddle.net/S9pkM/16/
table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child { border-right-color: red; }
精彩评论