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


我基本上有以下几点:

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

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

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

澄清


8280
2018-01-20 22:31


起源



答案:


将锚点的样式设置为:

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

9
2018-01-20 22:34



jsFiddle示例 - paislee
这仅在表格单元格元素上设置宽度和高度时才有效。它不是,并将根据生成的内容动态地改变大小。 - Lester Peabody
@paislee将高度或宽度设置为固定值不是表格单元格上的有效选项...我将在问题中澄清这一点 - Lester Peabody
@LesterPeabody只是为了证明锚点正在扩展到TD的全部高度〜无论发生了什么...... - paislee
我不确定这是否可以仅使用css完成,如果你可以使用jQuery,你也可以使用类似下面的内容: jsfiddle.net/zGWTk/3 - Yaron U.


答案:


将锚点的样式设置为:

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

9
2018-01-20 22:34



jsFiddle示例 - paislee
这仅在表格单元格元素上设置宽度和高度时才有效。它不是,并将根据生成的内容动态地改变大小。 - Lester Peabody
@paislee将高度或宽度设置为固定值不是表格单元格上的有效选项...我将在问题中澄清这一点 - Lester Peabody
@LesterPeabody只是为了证明锚点正在扩展到TD的全部高度〜无论发生了什么...... - paislee
我不确定这是否可以仅使用css完成,如果你可以使用jQuery,你也可以使用类似下面的内容: jsfiddle.net/zGWTk/3 - Yaron U.


在链接内部放置一个空的跨度。你可以给它一个类并添加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/


4
2018-01-21 00:16



*我刚刚更新了我的小提琴链接。抱歉一开始有错误的。 jsfiddle.net/zGWTk/6 - Nicole McCoy


以下黑客工作[在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/


1
2018-04-11 22:32



这是答案。它实际上是通过填充<a>并将<a>显示设置为块--- <{display:block;填充:20px; } --- --- - Jorge