如何从表格单元格建立链接[英]How can I make a link from a table cell 本文翻译自  aeq  查看原文  2010-07-26  195287    hyperlink/

I have the following:

我有以下内容：

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

I'd like to make the entire <td>...</td> a hyperlink. I'd prefer without the use of JavaScript. Is this possible?

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

6 个解决方案

#1

Yes, that's possible, albeit not literally the <td>, but what's in it. The simple trick is, to make sure that the content extends to the borders of the cell (it won't include the borders itself though).

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

As already explained, this isn't semantically correct. An a element is an inline element and should not be used as block-level element. However, here's an example (but JavaScript plus a td:hover CSS style will be much neater) that works in most browsers:

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

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

PS: it's actually neater to change a in a block-level element using CSS as explained in another solution in this thread. it won't work well in IE6 though, but that's no news ;)

PS：在这个线程的另一个解决方案中解释，使用CSS更改块级元素实际上更简洁。但它在IE6中效果不佳，但这不是新闻;）

Alternative (non-advised) solution

If your world is only Internet Explorer (rare, nowadays), you can violate the HTML standard and write this, it will work as expected, but will be highly frowned upon and be considered ill-advised (you haven't heard this from me). Any other browser than IE will not render the link, but will show the table correctly.

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

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

#2

Use this code:

使用此代码：

<td>
  <a href="http://example.com">
      hello world
  </a>
</td>

CSS code:

CSS代码：

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

#3

I would recommend using an actual anchor element, and set it as block.

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

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

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

This will set the anchor to the same dimensions of the parent div.

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

#4

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

#5

I'd like to make the entire td a hyperlink. I'd prefer without javascript. Is this possible?

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

That's not possible without javascript. Also, that won't be semantic markup. You should use link instead otherwise it is a matter of attaching onclick handler to <td> to redirect to some other page.

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

#6

You can creat the table you want, save it as an image and then use an image map to creat the link (this way you can put the coords of the hole td to make it in to a link).

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