如何使锚点标签填充表格单元格的宽度？

Question

我有一个带有锚点标签的表格单元格，我希望锚点标签的宽度（和高度）可以填充包含它的表格单元格的宽度。直觉在这方面并不起作用，请帮忙。

HTML：

<table>
    <tr>
        <td class="width_is_100px">
            <a href="http://www.doesnotwork.com"><span class="make_width_100px">Some Text</span></a>
        </td>
    </tr>
</table>

CSS:（不起作用）

.make_width_100px {
    width:100px !important;
}

锚点标签只有 "Some Text" 文本的宽度。我希望用户能够在表格单元格内的任何位置点击并触发链接。请勿使用JavaScript。

- John Anderson

---

尝试使用div代替span。span没有宽度和高度属性。将div的宽度设置为100％，以便它填充您设置给td的任何宽度。 - rechie

Answer 1

试一下：

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

- Tooraj Jam

Answer 2

将你的<a>元素变为块级元素（默认情况下是内联元素）：

.width_is_100px a {
    display:block;
}

- Tieson T.

Answer 3

这些答案都不能很好地填充宽度和高度当文本换行时。

我发现唯一一个能够正确填充单元格高度和宽度直到边缘的答案是这个：

td {
    overflow: hidden;
}

td > a {
    display: block;
    margin: -10em;
    padding: 10em;
}

- SharpC

---

现在是2019年，运行Firefox Night (67.0a1)，非常完美！非常感谢这个，不需要像IE9和其他浏览器的hackish position-absolute-way。 - Yoda

在Chrome中，唯一对我有效的方法是覆盖整个宽度和高度的边缘。 - hyphen

Answer 4

这可能有点晚了，但是在内容高度不同的表格中，这对我有用。

HTML

<table class="example">
    <tr>
        <td><a href="">small content</a></td>
        <td><a href="">multiline<br>content</a></td>
    <tr>
</table>

CSS

table{ 
    padding:10px;  /*for example*/
}
table.example td{
    overflow:hidden;
    padding:0px; /*you can need !important*/
}
table.example a{
    display: block;
    height: 100%;
    width: 100%;
    padding: 10px 10px 500px 10px; /*table default padding except on bottom 500px for example*/
    margin-bottom: -490px; /*same as bottom padding - table padding*/
}

- Rodrigo Lozano

Answer 5

<table>
    <tr>
        <td class="width_is_100px">
            <a href="http://www.doesnotwork.com"><div style="width:100%;">Some Text</div></a>
        </td>
    </tr>
</table>

- rechie