Clickable border cell in HTML/CSS

Question

I've already created a clickable cell in a table with:

<td>
    <a href="link.hmlt" style = "display:block; width:100%;height:100%> &nbsp;</a>
</td>

But the table has visible borders, and when the mouse is exactly over one these borders, the link does not work.

How can I make the border also clickable? I've tried a JavaScript solution:

<td onclick="document.location='link.html'" > </td>

Here the borders are handled, but it's not satisfactory, because in this case the "special" click types are not correctly handled (eg "ctrl + click" doesn't open a new tab).

Can we make the borders clickable in HTML/CSS? Do we have to use JavaScript?

EDIT : here is a minimal sample of what I have right now: http://jsfiddle.net/pUunJ/1/

Answer 1

first off, stay away from inline styling and inline javascript.

I believe you issue is you apply the border to the table cells, if you want the link to include the borders apply the border to link link instead of the table cell

td {
    padding: 0;
}
a {
    height: 100%;
    width: 100%;
    display: block;
    border: 5px solid black;
}

JSFIDDLE