How to strech a link over the whole cell?

Question

I have a table that includes links (anchors) that can be clicked to edit the row. I want these links to be stretched to the full width and height of the containing cell. I already set them to display: block; so they have the full width:

The problem is, I have trouble getting them to full height using CSS. See my example fiddle here: http://jsfiddle.net/timbuethe/53Ptm/2/.

Answer 1

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/