Question

我基本上有以下内容：

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="..."></a>
      </td>
    </tr>
  </tbody>
</table>

假设表格单元格具有一定的宽度和高度，由附加的表格单元格和表格标题元素创建。

我需要将该锚元素扩展到表格单元格的相同宽度和高度，以便您可以单击单元格中的任意位置以进入链接。如何做到这一点，以便它跨浏览器兼容？

澄清将表格单元格设置为固定宽度或高度不是有效选项。

Answer 1

将锚点的样式设置为：

 style="display: block; height: 100%; width:100%;"

Answer 2

在链接内部放置一个空的跨度。你可以给它一个类并添加css或给它一个内联样式。

我更喜欢添加这样的类：

<table>
<thead>
<tr>
  <th>Header</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
      <a id="anchor" href="#"><span class="linkfill"></span>Link</a>
  </td>
 </tr>
</tbody>

<style>
.linkfill {
position: absolute;
width: 100%;
height: 100%;
}
</style>

这会随你的桌子而变化。工作小提琴：http://jsfiddle.net/zGWTk/6/

Answer 3

以下黑客行为[在Chrome / Firefox / Safari上测试] 对td和锚元素使用相同的填充。并且对于锚也具有等于填充值的-ve的余量。

<强> HTML

<table>
    <tr>
        <td><a>Hello</a></td>
    </tr>
</table>

<强> CSS：

td {                          
    background-color: yellow;                                                                              
    padding: 10px;                                                                                                            
}  
a {
    cursor:pointer;
    display:block;
    padding: 10px;
    margin: -10px;
}

工作小提琴：http://jsfiddle.net/JasYz/

将anchor元素的大小扩展为父表单元格的大小

3 个答案: