如何从<td>表格单元格建立链接

Question

我有以下内容:

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

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

Answer 1

是的,这是可能的,虽然不是字面意思<td>,但它是什么.简单的窍门是,以确保内容延伸到小区的边界(这将不包括边界本身虽然).

如前所述,这在语义上并不正确.一个a元素是内嵌元件,并且不应该被用作块级元素.但是,这里有一个例子(但JavaScript的加上TD:悬停的CSS样式会更整洁),在大多数浏览器的工作原理:

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

PS:在这个线程的另一个解决方案中解释,a使用CSS 更改块级元素实际上更简洁.但它在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 上测试）