links inside table cells, clickable area won't fill cell.

**orangedog1984** · Mar 17, 2011 03:16

Hello

I have some tables on my site with some information for users to compare. The last column of the table consists of cells and there is a link to download the relevant application form (pdf) inside each of those cells. I want my users to be able to click anywhere in that cell to follow the link. I also want the entire space inside the border of that cell to change colour according to the :hover psuedo class I specify.

Problem: I cannot get the link (i.e. the <a> element) to fill the whole inside of the table cell (i.e. the <td> element).

I've used this CSS code:

Code CSS:

.bursary_table tbody tr td a {
	display:block;
	height:100%;
	width:100%;
	}

and this too

Code CSS:

.bursary_table tbody tr td a:hover {
	background-color:#e9e9e9;
	}

The :hover pseudo class works, but it doesn't stretch to fill the cell vertically. The only cell on the table that is being filled by it's nested <a> element is the 'fullest' cell, i.e. the one with the most text that is determining the height of all the rest. Can someone please tell me how to fix this, thank you.

**Paul O'B** · Mar 17, 2011 09:28

Hi,

You are dealing with separate elements here.

The anchor in one cell has no relationship with the anchor in another cell. The anchors will only be as tall as the content they hold. An anchor can't be made to fill a whole table cell because things just don't work like that.

You could make the whole cell change colour but not make the whole cell a link.

You can actually do it with the CSS display:table property and make the anchor itself a table-cell but this only works in ie8 and upwards and isn't very semantic.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
    margin:0;
    padding:0;
    display:table;
}
.test a {
    background:red;
    vertical-align:middle;
    border-right:10px solid #fff;
    padding:10px;
    display:table-cell;
    text-decoration:none;
}
.test a:hover {background:blue}
.test span{
    position:absolute;
    top:-999em;
    left:-999em;
}
</style>
</head>
<body>
<div class="test">
    <a href="#">test<br />
        test</a><span>|</span>
    <a href="#">test</a><span>|</span>
    <a href="#">test</a><span>|</span>
    <a href="#">test</a><span>|</span>
    <a href="#">test</a><span>|</span>
    <a href="#">test</a><span>|</span>
    <a href="#">test</a><span>|</span>
</div>
</body>
</html>

To cater for other browsers you will probably have to set a specific height if you want them to all be equal height.

**dresden_phoenix** · Mar 17, 2011 11:20

This would work with using a regular table mark up.

Code:

td a {display:table;  background: orange; width:100%; border-spacing:10px/*border-spacing  instead of padding*/}
td{padding:0; border-spacing:0}

IE8<, would have problems ... sighs... whats new... but at least it would be a matter of using some JS to target TD A's and setting the height to the parent TDs. A pain I know, but that IE for you.

**Paul O'B** · Mar 17, 2011 11:31

Originally Posted by dresden_phoenix

This would work with using a regular table mark up.

Code:

td a {display:table;  background: orange; width:100%; border-spacing:10px/*border-spacing  instead of padding*/}
td{padding:0; border-spacing:0}

IE8<, would have problems ... sighs... whats new... but at least it would be a matter of using some JS to target TD A's and setting the height to the parent TDs. A pain I know, but that IE for you.

Hi Dresden

Sorry to disagree but I already tried that lol

It won't account for the height if some text is larger than others.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
td a {
    display:table;
    background: orange;
    width:100%;
    border-spacing:10px/*border-spacing  instead of padding*/
}
td {
    padding:0;
    border-spacing:0
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
    <tr>
        <td><a href="#">test<br />test<br />test</a></td>
        <td><a href="#">test</a></td>
        <td><a href="#">test</a></td>
    </tr>
</table>
</body>
</html>

**dresden_phoenix** · Mar 17, 2011 13:06

Darn.. you are right, as usual, Paul.

User Tag List

Thread: links inside table cells, clickable area won't fill cell.

Thread Tools

Display

links inside table cells, clickable area won't fill cell.

Bookmarks

Bookmarks

Posting Permissions