如何製作表格超鏈接的單元格

如何在不使用javascript或jquery的html中將整個表格單元格超鏈接？如何製作表格超鏈接的單元格

我試圖把HREF在td標籤本身，但它不是至少使用Chrome 18

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

來源

2012-04-09 vaichidrewar

副本http://stackoverflow.com/questions/3337914/how-to-make-a-td-a-link – Usman 2012-04-09 07:37:47

已經討論過了。答案在這裏：http://stackoverflow.com/a/3966257/1320588 關心。 – sleepwalker 2012-04-09 07:38:19

@vaichidrewar你可以投票結束一個問題作爲另一個問題的重複，現在你有超過3000的聲望。 – 2016-09-30 04:59:23

試試這個：

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

我希望它能正常工作。

來源

2012-04-09 07:38:44 Kamal

是的，這是最好的方式，但你忘了垂直對齊的問題！使用這種方式，我們不能將鏈接完全放在td元素的中心......自己測試......用style =「display：block;」沒有style =「display：block;」我認爲也許JavaScript的方式更好，因爲今天JavaScript是每個人都需要的......看看我的答案...... – 2016-11-02 16:32:32

試試這個方法：

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

來源

2012-04-09 07:32:38 azawaza

感謝您的快速回復，但無效。 – vaichidrewar 2012-04-09 07:37:51

PS：元素中的style =「display：block」將使其佔據內部的所有空間，從而使整個單元成爲您想要的超鏈接。 – azawaza 2012-04-09 16:47:04

是的，這是最好的方式，但你忘記了垂直對齊問題！使用這種方式，我們不能將鏈接完全放在td元素的中心......自己測試......用style =「display：block;」沒有style =「display：block;」我認爲也許JavaScript的方式更好，因爲今天的JavaScript是必要的每一個... – 2016-11-02 16:03:07

這裏是我的解決方案：

<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（測試瀏覽器）

來源

2014-04-12 17:58:57 amp

這種作品，但當我將光標移動到單元格上時，它會在指針和手部之間交替。 – Hawkee 2015-11-30 16:52:35

在我看來，補丁不是一個好方法 – 2016-11-02 16:24:26

易與onclick函數和JavaScript鏈接：

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

來源

2014-06-16 01:16:16 Philip

當使用其他答案時，鏈接不一定佔據''元素中的所有空間。這是解決問題的唯一答案！ – frenchDolphin 2015-02-01 21:58:39

這也不會創建一個真正的超鏈接，因此，例如，鏈接目標不會出現在Chrome瀏覽器視圖的底部，也不能按Ctrl鍵單擊以在新選項卡中打開目標等。 – ChrisFox 2015-12-10 09:14:04

我也一直在尋找一個解決方案，而只是發現在其他網站上的代碼：

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

來源

2014-07-12 15:12:56 Christ

This isn'這是一個非常好的解決方案，因爲它在純HTML解決方案可用的情況下使用JavaScript。這會使鏈接無法用於沒有JavaScript的用戶。 – Zaz 2014-07-12 15:57:22

感謝@Christ，你給了我一個提示。 – Jaikrat 2014-08-13 12:03:22

@Zaz：今天JavaScript是每一個人都需要的...它在任何一個地方，即使是在一箇舊的智能手機中......它默認啓用 – 2016-11-02 16:21:20

問題：

（網友：卡邁勒）這是一個很好方式，但你忘了垂直對齊的問題！使用這種方式，我們不能將鏈接完全放在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; 
}

來源

2016-11-02 16:17:46

爲什麼不與<td>內<a>元素進行備份非JS結合的onclick方法？似乎很好。

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

來源

2018-02-21 16:41:39 shootz

我之前在人們試圖構建日曆時就已經看到過這個。你想要連接的單元格，但不想混淆其中的任何其他內容，試試這個，它可能會解決你的問題。

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

來源

2018-02-21 20:03:50 Jason

如何製作表格超鏈接的單元格

回答

相關問題