Question

我有以下代码：

<table>
<tr>
    <td><a href="#">some text</a></td>
    <td>some more text</td>
</tr>
</table>

我试图将这个表的整行变成一个超链接，但是我不想使用JavaScript鼠标事件，因为我被禁止使用JavaScript。我已经尝试过使用CSS，但只找到了将个人变成超链接的方法：a href style="display block;"，有没有人知道用css方法将整行变成超链接？

Answer 1

不，您不能仅使用CSS将元素/字段转换为可点击链接的元素/字段。您需要在TR内的每个标头/单元格中包含一个ANCHOR（并将ANCHOR设置为display: block，以便整个单元格可以点击），或使用Javascript使您的TR或TR TH / TD可点击/可跟踪到浏览器。

（ANCHOR方法）示例：

http://jsfiddle.net/userdude/V9kj5/1/

tr a {
    display: block;
}
tr td {
    border: 1px solid #ddd;
    width: 200px;
}

<table>
<tr>
    <td><a href="http://www.google.com" target="_google">some text</a></td>
    <td>some more text</td>
</tr>
<tr>
    <td><a href="http://www.google.com" target="_google">some text</a></td>
    <td><a href="http://www.google.com" target="_google">some more text</a></td>
</tr>
</table>

Answer 2

CSS指定页面的表示，而超链接指定功能。不，您不能使用CSS使整行行为链接成为锚点。您需要使用JavaScript。

Answer 3

虽然与@Jared Farish的回应非常相似，但这种设置应该会让锚占据整个细胞：

td a {

    display: inline-block;
    height:100%;
    width:100%

}

http://jsfiddle.net/NAfC5/2/

Answer 4

我的一般反应是说你不能，但你可以使第一个链接非常宽并且绝对定位它以使其命中区域覆盖第二个文本单元格。但是，第二个文本单元格将不具有其他链接样式。您还需要为第一个单元格指定宽度，以便它不会因为内部的绝对定位链接而崩溃。

See example →

<table>
    <tr>
        <td width="100"><a href="#">some text</a></td>
        <td>some more text</td>
    </tr>
</table>

tr {
    position:relative;
}

tr a {
    display:block;
    width:98%;
    position:absolute; top:10px; left:10px; z-index:10;
}

Answer 5

你可以做什么，modulo HTML解析器的奇怪之处在于将<a href>设置为表格行，方法是将其设置为display: table-row。但是，您必须处理HTML解析器，为您修复<td>内的<a>。如果你的页面是XHTML，那么这将非常容易。

如何将整体变成一个链接

5 个答案: