HTML表格行链接 [英] HTML table row link

问题描述

将一行HTML表格作为链接的最佳方式是什么？我目前正在使用jquery来斑马条纹行，并且突出显示onmouseover / off选定行，所以如果JavaScript是答案，请使用jquery。

解决方案

table.collection {width：500px; border-collapse：collapse;}
table.collection tr {background-color：#fff; border-bottom：1px＃99b solid;}
table.collection tr：hover {background-color：#ffe;}
table.collection td {display：table-cell; border-bottom：1px＃ 99b固体; padding：0px;}
table.collection td a {text-decoration：none;显示：块;填充：0像素;身高：100％;}
< / style>
< table class =collection>
< tr>
< td>< a href =＃> Linky1< / a>< / td>
< td>< a href =＃> Data1< / a>< / td>
< / tr>
< tr>
< td>< a href =＃> Linky2< / a>< / td>
< td>< a href =＃> Data2< / a>< / td>
< / tr>
< / table>

What is the best way to make a row of an HTML table a link? I currently am using jquery to zebra stripe the rows and also to highlight the onmouseover/off selected row, so if JavaScript is the answer, please use jquery.

解决方案

I just use css:

<style>
table.collection {width:500px;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;}
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;}
</style>
<table class="collection">
<tr>
    <td><a href="#">Linky1</a></td>
    <td><a href="#">Data1</a></td>
</tr>
<tr>
    <td><a href="#">Linky2</a></td>
    <td><a href="#">Data2</a></td>
</tr>
</table>

这篇关于HTML表格行链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！