Question

我目前有一个java脚本解决方案，可以使整个表格行可点击。我需要支持非java脚本人员，所以这可能没有java脚本吗？

我可以为每个单元格添加一个href标签，但这看起来有点过分，它也只允许用户点击单元格的内容。

将整个表格行变成超链接的其他选择吗？

Answer 1

不幸的是，不是没有在每个单元格中放置链接，否则它不是有效的标记。

您仍然可以通过使链接显示为块来显示“行”可点击，以便它们占据整个单元格。

e.g。（jsFiddle）

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

tr:hover { background: #ddd; }
td { border: 1px solid #000; border-collapse: collapse; }
td a { display: block; padding: 5px 20px; }

Answer 2

我意识到这是一个老线程，在Rich的回答中有一个完全合法的解决方案。然而，还有一种方法可以在没有javascript的情况下执行此操作而无需复制链接*列数并保持标记/ CSS有效。我花了一段时间才弄清楚，所以我想我会把它发布在其他人身上，就像我一样，最终也会在这个帖子上结束。

将链接放在第一列：

<table class="search_results">
    <tr>
        <td><a href="#">Some text</a></td>
        <td>more text</td>
        <td>more text</td>
    </tr>
</table>

这是完美的标记，因此您唯一真正的问题是让该链接跨越表格的宽度。我使用非常标准的CSS这样做：

table.search_results a {position:absolute;display:block;width:98%;}

将宽度更改为您想要的任何宽度，原则上您已完成并拂去灰尘。所以这一切都相对简单，但是如果你像我一样有流畅/响应式布局，并且你的链接上还有一些标准样式加上你桌子上的一些填充，你将需要这些规则（从上面复制必要的并添加额外）。

table.search_results td:first-child {padding:0;}
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;}
table.search_results a:hover {background:none;}
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}

解释：第一个规则仅删除我第一个td上的所有填充。默认情况下，我的td上的填充是.5em。第二个规则在链接上添加相同的填充，否则最终会出现未对齐的单元格内容。它还纠正了我的一些标准样式，以确保列看起来都一样。您也可以通过其他方式执行此操作（将链接样式添加到您的td）。使用最后两条规则，我摆脱了链接上的默认悬停效果，然后将它放在tr上，用于任何具有正确类的表。

这适用于我关心的浏览器，但你当然应该在你关心的人身上进行测试:)希望我能用这篇文章帮助你节省一些时间！

Answer 3

各种浏览器可能允许也可能不允许用href包装整个TR，但是，即使浏览器支持这一点，它也是无效的（X）HTML并且结果会因浏览器而异，因此非常不可靠方式（更新也可以改变行为）。

您最好的选择是使用JS，或者在每个单元格中放置一个href。

我可以在没有javascript的情况下点击TR吗？

3 个答案: