我怎样才能从一个<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的坐标进入一个链接)。