如何将表格中的单元格设置为超链接

Question

如何在HTML中不使用JavaScript或jQuery使整个表格单元格超链接化？

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

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

- vaichidrewar

---

如何将表格中的单元格制作成超链接？您可以在 HTML 中使用<a>标签将一个单元格转化为超链接。例如，如果您想将表格中的第一个单元格变成指向Google网站的超链接，您可以这样编写HTML代码：

Google

其他单元格

在这个例子中，<a>标签包裹在<td>标签中，使得该单元格可以被点击并跳转到指定的网页。要更改链接的目标网址，请将href属性更改为所需的URL。 - Usman

已经讨论过了。答案在这里：https://dev59.com/52865IYBdhLWcg3wIrBg#3966257 谢谢。 - sleepwalker

@vaichidrewar，现在您已经拥有超过3000的声望值，因此您可以将一个问题投票关闭为另一个重复的问题。 - Andrew Grimm

Answer 1

试一下这个：

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

我希望它能够正常工作。

- Kamal

---

是的，这是最好的方法，但你忘了垂直对齐的问题！使用这种方法，我们无法将链接放置在td元素的正中间...你可以自己测试一下...有style="display:block;"和没有style="display:block;" 我认为JavaScript方式可能更好，因为今天每个人都需要JavaScript...看看我的答案... - Mahdi Jazini

Answer 2

试试这种方式：

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

- azawaza

---

谢谢您的快速回复，但是 <td href=http://www.google.com style='display:block;'> 没有起作用。 - vaichidrewar

<a>元素中的style="display:block"属性将使其占据<td>标签内的所有空间，从而使整个单元格成为您所需的超链接。 - azawaza

是的，这是最好的方法，但你忘了垂直对齐问题！使用这种方式，我们无法将链接放置在td元素的正中心...自己测试一下...带有style ="display：block;"和没有style = "display：block;"。我认为也许JavaScript的方式更好，因为今天每个人都需要JavaScript... - Mahdi Jazini

Answer 3

通过onclick函数和javascript链接很容易实现：

<td onclick="location.href='你的页面.html'">去你的页面</td>

- Philip

---

当使用其他答案时，链接不一定占用<td>元素中的所有空间。这是唯一解决问题的答案！ - jfdoming

这也并不是一个真正的超链接，所以例如在Chrome的底部查看时，链接目标不会出现，也不能使用Ctrl键加点击打开目标到新标签页等。 - ChrisFox

这是一个非常丑陋的解决方案，因为它以任何方式都无法在新标签页中打开链接（在我所知道的范围内）。我在某处遇到过这种行为，它真的很烦人。如果单元格中有实际链接，它会更加烦人，因为当你使用 Ctrl+单击 以打开新标签页时，它会在相同的标签页和新标签页中打开链接。 - Xiyng

Answer 4

为了备份非JS，为什么不将onclick方法与元素结合在内部呢？这种方法看起来很好用。

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

- shootz

---

我希望我知道为什么更多的人不喜欢这个答案。我打算使用它。 - codenoob

Answer 5

问题：

(用户：Kamal) 这是一种好方法，但你忘了垂直对齐的问题！使用这种方法，我们无法将链接放在 TD 元素的中心位置！即使使用 vertical-align:middle；

(用户：Christ) 你的答案是最好的答案，因为没有任何对齐问题，并且今天 JavaScript 对于每个人都是必要的... 它无处不在，甚至在旧智能手机上也可以使用... 而且它默认启用...

我的建议来完善 (用户：Christ) 的答案:

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

- Mahdi Jazini

---

我最喜欢这个答案。 - Gregory Grant

Answer 6

这是我的解决方案：

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

- amp

---

这个有点作用，但是当我把光标移到单元格上时，它在指针和手的形式之间交替变化。 - Hawkee

Answer 7

你可以将<a>标签的视觉行为设置为表格单元格：

HTML：

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

CSS：

tr > a {
  display: table-cell;
}

- Ben

---

这是最好的方法，可以使整个单元格可点击，即使单元格没有内容，也不需要添加任何 。CSS可能需要一些额外的调整才能使其正常工作，例如vertical-align:center，但这没问题。 - Magnus

这种方法效果最好，使整个单元格可点击，即使单元格没有内容也能正常工作，无需添加任何  。CSS可能需要一些额外的调整才能实现相同效果，比如 vertical-align:center，但这没问题。 - Magnus

Answer 8

我曾经看到过人们在尝试构建日历时遇到过这种情况。你想要链接单元格，但又不想干扰其中的其他内容，尝试一下这个方法，它可能会解决你的问题。

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

- Jason

---

这与@Christ的解决方案完全相同。感谢您的答案，但请尽量避免发布已经存在的重复内容。请注意，此答案与其重复内容存在相同的问题：它是不必要使用Javascript，可能会对可访问性软件等造成问题。 - GKFX

Answer 9

我遇到了这个问题，使用了display block方法让a元素填充整个单元格。唯一的问题是当表格单元格有padding时，不是整个单元格都可以点击。

我使用CSS从包含锚点的表格单元格中删除了padding，并将相同的padding添加到锚点中。

所以最终我得到了这个：

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ddd;
}

td,
th,
.anchor_cell a {
    padding: 8px;
}

.anchor_cell {
  padding: 0;
}

.anchor_cell a {
  display: block;
}

<table>
        <thead>
            <tr>
                <th>Name</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td class="anchor_cell"><a href="/the_url">John Doe</a></td>
            <td>1</td>
          </tr>
          <tr>
            <td class="anchor_cell"><a href="/the_url">Jane Doe</a></td>
            <td>1</td>
          </tr>
        </tbody>
    </table>

- Michel FW

Answer 10

不完全是将单元格变为链接，而是将整个表格都变为链接。我在电子邮件中使用它作为按钮，给我类似于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>

- Grextarosta