How to strech a link over the whole cell?

I don't think that it can be made using only CSS, because the height property is always refering to the elements content, not the parent elements height.

Check the Fiddle again and see how it is made with a simple javascript. It fetched the parents elements height and saves it in a variable, which is then appended ass style rule to your anchor element.


You can fix this with a little javascript on each cell so the javascript will send the user to a url when the cell is clicked on. You'll want to use this line of code for each cell < td > < / td >

<td bgcolor="lightgray" onClick="document.location.href='http://www.URLHERE.com/';" style="cursor:pointer;"><a>c 1</a></td>

I've kept the < a > < / a > tag in place just in case the user doesn't have javascript enabled, but the background of the cell will stay intact and using this piece of javascript should cover most users.


Set an arbitrarily large negative margin and equal padding on the block element and overflow hidden on the parent.

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/53Ptm/43/