如何获得一个锚标记来填充表格单元格的宽度？答案

【问题标题】：How to do I get an anchor tag to fill the width of a table cell?如何获得一个锚标记来填充表格单元格的宽度？
【发布时间】：2012-06-08 05:09:31
【问题描述】：

我有一个带有锚标记的表格单元格，我希望锚标记的宽度（和高度）填充包含表格单元格的宽度。直觉似乎对此不起作用。请帮忙。

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。

【问题讨论】：

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

标签： html width anchor

【解决方案1】：

这些答案都不能正常填充宽度和高度when the text wraps。

我发现的唯一答案是this one：

td {
    overflow: hidden;
}

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

【讨论】：

现在是 2019 年，正在运行 Firefox Night (67.0a1)，这就像一个魅力！非常感谢这一点，并且没有像 IE9 和 Co. 时代那样骇人听闻的绝对位置方式。?

【解决方案2】：

这可能为时已晚，但是，这对我在具有不同内容高度的表格中起作用。

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*/
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

将<a> 元素设为块元素（默认为内联）：

.width_is_100px a {
    display:block;
}

【讨论】：

【解决方案5】：

试试看：

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

【讨论】：