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

How can entire table cell be hyperlinked in html without javascript or jquery?

如何在没有javascript或jquery的情况下用html超链接整个表格单元格？

I tried to put href in td tag itself but its not working at least in chrome 18

我试图将href放在td标签本身，但它至少在chrome 18中不起作用

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

8 个解决方案

#1

Try this:

尝试这个：

HTML:

HTML：

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

CSS:

CSS：

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

I hope it will work fine.

我希望它能正常工作。

#2

Try this way:

试试这种方式：

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

#3

Easy with onclick-function and a javascript link:

轻松使用onclick功能和javascript链接：

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

转到您的网页

#4

I have also been looking for a solution, and just found this code on another site:

我一直在寻找解决方案，只是在另一个网站上找到了这个代码：

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

link

#5

Here is my solution:

这是我的解决方案：

<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 {
         /*...*/
     }
}

Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)

像这样你仍然可以受益于一些表格单元属性，如vertical-align。（在Chrome上测试）

#6

Problems:

问题：

(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;

（用户：Kamal）这是一个好方法，但你忘记了垂直对齐问题！使用这种方式，我们不能将链接准确地放在TD元素的中心！即使是垂直对齐：中间;

(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...

（用户：基督）你的答案是最好的答案，因为没有任何对齐的问题，而且今天每个人都需要JavaScript ...它甚至在一个旧的智能手机的每个地方......并且它默认启用。 ..

My Suggestion to complete answer of (User: Christ):

我建议完成（用户：基督）的回答：

HTML:

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:

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

#7

I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.

我以前在人们试图建立日历时已经看过这个。你想要链接的单元格，但不想弄乱它内部的任何其他东西，试试这个，它可能会解决你的问题。

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

#8

Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.

为什么不将onclick方法与中的元素结合起来用于非JS的备份？似乎工作得很好。

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