ansaurus

Question

Ideas for table row outline on hover? CSS outline fails on tr in Webkit.

Answer 1

A:

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"&gt;
<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>

graphicdivine 2009-12-24 10:03:06

But, I realise, this also fails in IE7. :(

graphicdivine 2009-12-24 10:25:37

2 is where all the fun is though! Haha... I really want the outline to be outside of the row -- no vertical lines on the inside of the row. It's too bad outline doesn't allow you to define each side like border. A solution using borders instead will change the box model on hover which I want to stay away from.

David Marble 2009-12-24 10:33:07

Good try, however display:block changes the rendering of the table row to be in essence a block (like a div), so that its row-like properties are gone. We might as well build a table using non-table elements and css if we go this route. I haven't ruled that out, but the data is definitely the kind I'd like to keep in actual html tables.

David Marble 2009-12-24 16:46:20

Answer 2

+1 A:

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

David Marble 2009-12-25 00:38:55

Nice one. The `tr` doesn't have a border/outline property, so you really can't do anything with it.

BalusC 2009-12-25 01:22:49

ansaurus

tags:

views:

answers:

Ideas for table row outline on hover? CSS outline fails on tr in Webkit.

related questions