如何从一个链接建立链接 table cell

Question

我有以下内容：

<td>
  some text
  <div>a div</div>
</td>

我想让整个<td>...</td>成为一个超链接。我更喜欢不使用JavaScript。这可能吗？

Answer 1

是的，这是可能的，虽然不是字面上的<td>，但它是什么。简单的诀窍是，确保内容扩展到单元格的边界（尽管它不包括边框本身）。

如前所述，这在语义上并不正确。 a元素是内联元素，不应用作块级元素。但是，这是一个例子（但JavaScript加上td：hover CSS样式将更加整洁），适用于大多数浏览器：

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

PS：使用CSS作为a，在块级元素中更改explained in another solution in this thread实际上更简洁。但它在IE6中效果不佳，但这不是新闻;）

替代（非建议）解决方案

如果你的世界只是Internet Explorer（现在很少见），你可以违反HTML标准并写下来，它将按预期工作，但会非常不满意并被认为是不明智的（你没有听到过这个消息来自我）。除IE之外的任何其他浏览器都不会呈现链接，但会正确显示该表。

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>

Answer 2

使用此代码。它扩展了<a>以水平填充细胞。要垂直填充，请使用height属性。

td a {
  width: 100%;
  display: block;
}

td {
  /* Cell styles for demonstration purposes only */
  border: 1px solid black;
  width: 10em;
}

<table><tr>
  <td>
    <a href="http://example.com">
      Hello World
    </a>
  </td>
</tr></table>

Answer 3

我建议使用实际的锚元素，并将其设置为块。

<div class="divBox">
    <a href="#">Link</a>
</div>

.divBox
{
    width: 300px;
    height: 100px;
}
.divBox a
{
    width: 100%;
    height: 100%;
    display: block;
}

这会将锚点设置为父div的相同尺寸。

Answer 4

这是我的解决方案：

<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上测试过）

Answer 5

我想让整个td成为一个超链接。我更喜欢没有javascript。这可能吗？

没有javascript就不可能。此外，这不是语义标记。您应该使用链接，否则将onclick处理程序附加到<td>以重定向到其他页面。

Answer 6

您可以创建所需的表格，将其另存为图像，然后使用图像映射创建链接（这样您就可以将孔的坐标设置为链接）。