如何制作表格超链接的单元格

Question

如何在不使用javascript或jquery的html中将整个表格单元格超链接？

我试图把HREF在td标签本身，但它不是至少使用Chrome 18

<td href='http://www.m-w.com/dictionary/' style="cursor:pointer"> 

Answer 1

试试这个：

HTML：

<table width="200" border="1" class="table"> 
    <tr> 
     <td><a href="#">&nbsp;</a></td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

CSS：

.table a 
{ 
    display:block; 
    text-decoration:none; 
} 

我希望它能正常工作。

Answer 2

试试这个方法：

<td><a href="..." style="display:block;">&nbsp;</a></td> 

Answer 3

这里是我的解决方案：

<td> 
    <a href="/yourURL"></a> 
    <div class="item-container"> 
     <img class="icon" src="/iconURL" /> 
     <p class="name"> 
     SomeText 
     </p> 
    </div> 
</td> 

（LESS）

td { 
    padding: 1%; 
    vertical-align: bottom; 
    position:relative; 

    a { 
     height: 100%; 
     display: block; 
     position: absolute; 
     top:0; 
     bottom:0; 
     right:0; 
     left:0; 
     } 

    .item-container { 
     /*...*/ 
    } 
} 

这样你仍然可以从一些表格单元格属性中受益像vertical-align（测试浏览器）

Answer 4

易与onclick函数和JavaScript链接：

<td onclick="location.href='yourpage.html'">go to yourpage</td>

Answer 5

我也一直在寻找一个解决方案，而只是发现在其他网站上的代码：

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

Answer 6

问题：

（网友：卡迈勒）这是一个很好方式，但你忘了垂直对齐的问题！使用这种方式，我们不能将链接完全放在TD元素的中心！即使使用vertical-align：middle;

（网友：基督）你的回答是最好的答案，因为没有任何对齐问题，也是当今JavaScript是必需的每一个......这是在每一个地方，甚至在一个古老的智能手机...它是默认启用...

我的建议来完成（网友：基督）的答案

HTML：

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td> 

CSS：

a.LN1 { 
    font-style:normal; 
    font-weight:bold; 
    font-size:1.0em; 
} 

a.LN2:link { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

a.LN3:visited { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

a.LN4:hover { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

a.LN5:active { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

Answer 7

为什么不与<td>内<a>元素进行备份非JS结合的onclick方法？似乎很好。

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td> 

Answer 8

我之前在人们试图构建日历时就已经看到过这个。你想要连接的单元格，但不想混淆其中的任何其他内容，试试这个，它可能会解决你的问题。

<tr> 
<td onClick="location.href='http://www.*.com';"> 
Cell content goes here 
</td> 
</tr> 

Answer 9

这里是我的解决方案：

<td> 
    <a href="/yourURL"></a> 
    <div class="item-container"> 
     <img class="icon" src="/iconURL" /> 
     <p class="name"> 
     SomeText 
     </p> 
    </div> 
</td> 

（LESS）

td { 
    padding: 1%; 
    vertical-align: bottom; 
    position:relative; 

    a { 
     height: 100%; 
     display: block; 
     position: absolute; 
     top:0; 
     bottom:0; 
     right:0; 
     left:0; 
     } 

    .item-container { 
     /*...*/ 
    } 
} 

这样你仍然可以从一些表格单元格属性中受益像vertical-align（测试浏览器）

Answer 10

易与onclick函数和JavaScript链接：

<td onclick="location.href='yourpage.html'">go to yourpage</td>

Answer 11

我也一直在寻找一个解决方案，而只是发现在其他网站上的代码：

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

Answer 12

问题：

（网友：卡迈勒）这是一个很好方式，但你忘了垂直对齐的问题！使用这种方式，我们不能将链接完全放在TD元素的中心！即使使用vertical-align：middle;

（网友：基督）你的回答是最好的答案，因为没有任何对齐问题，也是当今JavaScript是必需的每一个......这是在每一个地方，甚至在一个古老的智能手机...它是默认启用...

我的建议来完成（网友：基督）的答案

HTML：

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td> 

CSS：

a.LN1 { 
    font-style:normal; 
    font-weight:bold; 
    font-size:1.0em; 
} 

a.LN2:link { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

a.LN3:visited { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

a.LN4:hover { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

a.LN5:active { 
    color:#A4DCF5; 
    text-decoration:none; 
} 

Answer 13

为什么不与<td>内<a>元素进行备份非JS结合的onclick方法？似乎很好。

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td> 

Answer 14

我之前在人们试图构建日历时就已经看到过这个。你想要连接的单元格，但不想混淆其中的任何其他内容，试试这个，它可能会解决你的问题。

<tr> 
<td onClick="location.href='http://www.*.com';"> 
Cell content goes here 
</td> 
</tr>