Links inside table cells, clickable area won't fill cell

HTML & CSS
1

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:

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

and this too

.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.

2

Hi,

You are dealing with separate elements here.:slight_smile:

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.


<!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.

3

This would work with using a regular table mark up.


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.

4

Hi Dresden :slight_smile:

Sorry to disagree but I already tried that lol :slight_smile: It won’t account for the height if some text is larger than others.

e.g.


<!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>
5

Darn… you are right, as usual, Paul.