我怎样才能从一个<td>表单元格的链接

我有以下几点:

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

我想使整个<td>...</td>超链接。 我宁愿不使用JavaScript。 这可能吗?

是的,这是可能的,虽然不是字面上的,但它是什么。 简单的技巧是确保内容扩展到单元格的边界(尽pipe它不包括边框本身)。

如前所述,这在语义上不正确。 a元素是一个内联元素,不应该被用作块级元素。 不过,下面是一个例子(但是JavaScript加上一个td:hover CSS风格将会更加简洁),它可以在大多数浏览器中使用:

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

PS: 在这个线程的另一个解决scheme中,使用CSS更改块级元素实际上更加简单。 IE6虽然不行,但这不是什么新闻)

替代(非build议)解决scheme

如果你的世界只有Internet Explorer(现在很less见),那么你可以违反HTML标准并写下这个标准,它会按预期工作,但是会被高估,并被认为是不明智的(你没有听说过)。 除IE以外的任何其他浏览器都不会呈现链接,但会正确显示表格。

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

使用此代码:

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

CSS代码:

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

我会build议使用一个实际的锚点元素,并将其设置为块。

 <div class="divBox"> <a href="#">Link</a> </div> .divBox { width: 300px; height: 100px; } .divBox a { width: 100%; height: 100%; display: block; } 

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

这是我的解决scheme:

 <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上testing)

我想使整个td超链接。 我宁愿没有JavaScript。 这可能吗?

这是不可能的,没有JavaScript。 而且,这不会是语义标记。 你应该使用链接,否则它是一个附加onclick处理程序到<td>redirect到其他页面的问题。

你可以创build你想要的表格,把它保存为一个图像,然后使用一个图像地图来创build链接(这样你可以把孔td的坐标进入一个链接)。