HTML / CSS中的可单击边框单元格

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:

如何使边框也可以点击?我尝试过JavaScript解决方案:

<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 (e.g. "ctrl + click" doesn't open a new tab).

这里处理了边框,但这并不令人满意,因为在这种情况下,“特殊”点击类型没有得到正确处理(例如“ctrl + click”不会打开新标签)。

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

我们可以在HTML / CSS中点击边框吗?我们必须使用JavaScript吗?

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

编辑:这是我现在所拥有的最小样本:http://jsfiddle.net/pUunJ/1/

1 个解决方案

#1

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

首先,远离内联样式和内联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

#1