35

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

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

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

10 回答 10

42

试试这个：

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-09T07:38:44.217 回答
22

试试这个方法：

<td><a href="..." style="display:block;">&nbsp;</a></td>
于 2012-04-09T07:32:38.617 回答
14

使用 onclick 功能和 javascript 链接很容易：

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

于 2014-06-16T01:16:16.340 回答
7

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

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

于 2014-07-12T15:12:56.223 回答
5

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

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>
于 2018-02-21T16:41:39.137 回答
2

问题：

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

（用户：Christ）你的答案是最好的答案，因为没有任何对齐问题，而且今天 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-02T16:17:46.760 回答
1

这是我的解决方案：

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

（较少的）

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.（在 Chrome 上测试）

于 2014-04-12T17:58:57.010 回答
0

我以前在人们试图建立日历时看到过这种情况。您想要链接单元格，但不想弄乱其中的任何其他内容，试试这个，它可能会解决您的问题。

<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
于 2018-02-21T20:03:50.263 回答
0

不完全使单元格成为链接，而是表格本身。我将它用作电子邮件中的按钮，为我提供类似 div 的控件。

<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
  <table style="margin-left: auto; margin-right: auto;" align="center">
    <tr>
      <td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
    </tr>
  </table>
</a>

于 2020-07-15T11:26:08.823 回答
0

您可以为 <a> 标记提供表格单元格的视觉行为：

HTML：

<table>
  <tr>
    <a href="...">Cell 1</a>
    <td>Cell 2</td>
  </tr>
</table>

CSS：

tr > a {
  display: table-cell;
}
于 2020-10-17T14:19:17.143 回答