如何使整个< tr>进入链接 [英] how to turn a whole <tr> into a link

问题描述

我有以下代码：

 < table& 
< tr> 
< td>< a href =＃>一些文字< / a>< / td> 
< td>一些更多文字< / td> 
< / tr> 
< / table> 
  

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

不，你不能将一个元素/字段变成一个可点击的链接 - 下面的元素/字段只有CSS。您需要在TR中的每个标题/单元格中包含一个ANCHOR（并将ANCHOR设置为 display：block ，以便整个单元格可以单击），或者使用Javascript

示例（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.comtarget =_ google>一些文字< / a>< / td> 
< td>一些更多文字< / td> 
< / tr> 
< tr> 
< td>< a href =http://www.google.comtarget =_ google>一些文字< / a>< / td> 
< td>< a href =http://www.google.comtarget =_ google>一些更多文字< / a>< / td> 
< / tr> 
< / table> 
  

I have the following code:

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

I am trying to turn the whole row of this table into a hyperlink, however I do not want to use the JavaScript mouse event as i am restricted from using JavaScript. I have tried using CSS but only found ways to make an individual into a hyperlink by going: a href style="display block;" , does anyone know a css way to turn the whole row into a hyperlink?

解决方案

No, you can't turn an element/field into a clickable link-following element/field with CSS only. You will need to either include an ANCHOR within each header/cell within the TR (and set the ANCHOR to display: block so the entire cell is clickable), or use Javascript to make your TR or TR TH/TD's clickable/followable to the browser.

Example (of the ANCHOR approach):

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>

这篇关于如何使整个< tr>进入链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！