如何把整個<tr>到鏈接

我有以下代碼：如何把整個<tr>到鏈接

<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方法將整行變成超鏈接？

來源

2011-04-26 mickwaffle

也許你從使用Java的限制，但怎麼樣的JavaScript？ – BoltClock 2011-04-26 00:44:44

yes javascript對不起 – mickwaffle 2011-04-26 00:50:01

不，您不能將元素/字段轉換爲僅帶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>

來源

2011-04-26 00:49:45

這不會拉伸鏈接到完整的單元格高度，請參閱我的小提琴叉：http://jsfiddle.net/timbuethe/BsKz8/ – 2012-02-03 10:27:02

我沒有看到你和我的任何區別，所以我假設你在進行修改後沒有保存？ – 2012-02-03 22:38:33

我不好，試試這個：http://jsfiddle.net/BsKz8/2/ – 2012-02-04 15:26:29

CSS指定頁面的呈現，而超鏈接指定功能。不，您不能使用CSS將整行連接起來。您將需要使用JavaScript。

來源

2011-04-26 00:55:43 Phrogz

我的一般反應是說你不能，但是你可以使第一個鏈接非常寬並且絕對定位它，使它的命中區域覆蓋第二個文本單元格。但是，第二個文本單元格不會有其他鏈接樣式。您還需要指定第一個單元格的寬度，以便它不會因爲內部絕對定位的鏈接而摺疊。

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; 
}

來源

2011-04-26 00:58:13 mVChr

@mVChr - 褻瀆！ – 2011-04-26 01:01:06

@mVChr - 你需要考慮多行：http://jsfiddle.net/userdude/UkW2p/1/也許'位置：相對'？ – 2011-04-26 01:02:24

我同意，但我想提出一個解決方案，如果他無法或有限制訪問修改實際的HTML。 – mVChr 2011-04-26 01:02:34

你可以做什麼，模HTML解析器的怪事是將其設置爲display: table-row做出<a href>到錶行。但是，那麼你將不得不處理在<a>裏爲你修復<td>的HTML解析器。不過，如果你的頁面是XHTML，那麼這很容易實現。

來源

2011-04-26 02:13:29

雖然非常相似，@Jared法裏絲的迴應，這種設置應使錨佔據整個電池：

td a { 

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

}

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

來源

2013-06-20 19:32:02 CodeXomby

如何把整個<tr>到鏈接

回答

相關問題