TD content stretch to tallest TD of TR

**andyisan** · 07-19-2010, 09:40 PM

I have this code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head><title>Test</title>

<style type="text/css">

td {
width: 100px;
vertical-align: top;
border: 1px solid black;
}

td a {
display: block;
height: 100%;
}

td a:hover {
background-color: green;
}
</style>

</head>

<body>


<table>
<tr>
<td><a href="d">One year ago, in July 2009, Tumblr was going strong. They had 255 million pageviews that month. By November of last year, that was up to 420 million pageviews. But some new stats which Tumblr is releasing today show an explosion in growth since then. Tumblr is now at 1.5 billion pageviews a month — their Quantcast data confirms this.</a></td>
<td><a href="c">For the first time, Tumblr is now a top 50 site in the U.S. in terms of traffic as gauged by Quantcast.</a></td>
<td><a href="b">now posting some 4.5 million posts a day</a></td>
</tr>
</table>


</body>


</html>

When I hover over the middle TD, it looks like this:

How can I extend the <a> so that the green background goes all the way to the bottom of the TD and fills up the whole TD?

**bluewalrus** · 07-19-2010, 10:45 PM

Change this

Code:

td a:hover {
background-color: green;
}

to

Code:

td:hover a {
background-color: green;
}

This may not work in ie 6 or 7 forget which one, if both, it doesnt work in...

**andyisan** · 07-20-2010, 01:22 AM

I've tried that and it gives the appearance of working but it doesn't make the "dead zone" of the smaller TD's clickable.

**bluewalrus** · 07-20-2010, 12:45 PM

Is the "dead zone" where the content of the a element doesn't extended to the end of the td element?

I'm not sure how to fix that with css only, I know how to do it with js... If you want the js solution let me know, or if someone else knows how to do it with just css...

**andyisan** · 07-22-2010, 05:48 PM

Originally Posted by bluewalrus

Is the "dead zone" where the content of the a element doesn't extended to the end of the td element?

I'm not sure how to fix that with css only, I know how to do it with js... If you want the js solution let me know, or if someone else knows how to do it with just css...

If there's no CSS method then sure JS is great!

Thread: TD content stretch to tallest TD of TR

Thread Tools

Search Thread

TD content stretch to tallest TD of TR

The Following User Says Thank You to bluewalrus For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions