If I put “display: block;” instead of “float:left;” I obtain the same result!
Hi,
Upon further testing I don’t see a problem with using either one. A float simply generates a block box, we use it instead of display:block to kill some whitespace bugs in IE when using a UL but that is not a problem here with the table.
I have updated the code in my live example and it seems to be working fine in all but IE6 now.
http://www.css-lab.com/test/clickable-tr-link.html
And also if I load the page with my IE7 browser I can see it in this way:
We need to remove the default cellpadding from the table to close up the the gaps. Then all the box model calculations will be correct as long as your math is correct.
Need to do that in the html like so:
<div id="wrap">
[B]<table cellpadding="0">[/B]
<tr>
<th width="100">Book Name</th>
<th width="300">Description</th>
<th width="100">Price</th>
</tr>
I had a suspicion that the borders might complicate things and sure enough it did in IE7. It still needs position:relative on the last td of each tr in order to let the actual link extend the full width of the row.
In doing that it triggered some sort of border bug which doubled up the bottom border on the last td. I was able to target the last td with the “adjacent sibling selector”, luckily IE7 supports it. 
*+html #wrap tr:hover td+td+td { /*IE7 needs this mess*/
position:relative;/*full access to the anchor (introduces new border bug)*/
border-bottom:0 none;/*fix new border bug*/
}
*+html #wrap tr:hover td.last {/*IE7 needs a class on the last td to override the rules above*/
border-bottom:1px solid red;
}
The override rule at the bottom simply restores the bottom border back to the last td in the table. We need to use a class for that in the html, I see no other way around it.
<tr>
<td>Book 8</td>
<td class="link"><a href="#8">Talk about the book</a></td>
[B]<td class="last">[/B]$20.00</td>
</tr>
</table>
</div>
IE7 was a little troublesome here but it was a nice challenge.
Here is the complete revised code that is being used in the updated link:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clickable Table Row with Live Anchor</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.3 arial,helvetica,sans-serif;
background:#999;
}
h1 {
font-size:1.5em;
text-align: center;
}
#wrap {
width: 534px;
margin: 40px auto;
}
table {
width: 100%;
table-layout: fixed;
border: 0 none;
border-collapse: collapse;
background: #cdf;
}
th {
background: #000;
color: #fff;
text-align: left;
}
td, th {
height: 1.5em;
line-height: 1.5em;
padding-left: 10px;
border:1px solid red;
}
td.link {
background:#CEF;
}
#wrap td.link a {
float:left;/*display:block;*/
width: 292px;
margin-left:-121px;
padding:0 120px;
position:relative;/*all browsers*/
z-index: 2;/*all browsers*/
background: url(no.gif);/* trick IE to paint the area transparent to cover content*/
text-decoration:none;
color:#000;
}
#wrap td.link a:hover {
color:#00F;
}
#wrap tr:hover td {
background: #fff;
color: #000;
}
*+html #wrap tr:hover td+td+td { /*IE7 needs this mess*/
position:relative;/*full access to the anchor (introduces new border bug)*/
border-bottom:0 none;/*fix new border bug*/
}
*+html #wrap tr:hover td.last {/*IE7 needs a class on the last td to override the rules above*/
border-bottom:1px solid red;
}
</style>
</head>
<body>
<h1>Clickable Table Row with Live Anchor</h1>
<div id="wrap">
<table cellpadding="0">
<tr>
<th width="100">Book Name</th>
<th width="300">Description</th>
<th width="100">Price</th>
</tr>
<tr>
<td>Book 1</td>
<td class="link"><a href="#1">Talk about the book</a></td>
<td>$20.00</td>
</tr>
<tr>
<td>Book 2</td>
<td class="link"><a href="#2">Talk about the book</a></td>
<td>$20.00</td>
</tr>
<tr>
<td>Book 3</td>
<td class="link"><a href="#3">Talk about the book</a></td>
<td>$20.00</td>
</tr>
<tr>
<td>Book 4</td>
<td class="link"><a href="#4">Talk about the book</a></td>
<td>$20.00</td>
</tr>
<tr>
<td>Book 5</td>
<td class="link"><a href="#5">Talk about the book</a></td>
<td>$20.00</td>
</tr>
<tr>
<td>Book 6</td>
<td class="link"><a href="#6">Talk about the book</a></td>
<td>$20.00</td>
</tr>
<tr>
<td>Book 7</td>
<td class="link"><a href="#7">Talk about the book</a></td>
<td>$20.00</td>
</tr>
<tr>
<td>Book 8</td>
<td class="link"><a href="#8">Talk about the book</a></td>
<td class="last">$20.00</td>
</tr>
</table>
</div>
</body>
</html>
