css - 整个 TD 作为可扩展表中的超链接

Question

我需要实现我的整个 TD 是一个超链接。我在互联网上找到的其他解决方案似乎不起作用。就像下面显示的那样。
因此我想知道你们是否可以帮助我。

我认为问题可能在于这是关于可扩展表的事实。
如果是这样，还有其他方法可以实现我的目标吗？

<div class="block">
<table>
    <tr>
        <td>
            <a href="http://example.com">
                <div style="width: 100%; height: 100%;">
                    Test
                </div>
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="google.com">Google</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="google.com">Google</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="google.com">Google</a>
        </td>
    </tr>
</table>
</div>

使用这个 CSS:

<style type="text/css">
.block {
    width: 100px;
    height: 500px;
    background: #008700;
}

.block table {
    /*width: 100%;*/
    height: 100%;
    text-align: center;
    border-collapse: collapse;
}

.block table tr:nth-child(odd) {
    background: #008200;
}

.block table tr:nth-child(even) {
    background: #205527;
}

.block table tr {

}

.block table tr td {
    float: left;
}

.block table tr td a {
    display: block;
    width: 100%;
}
</style>

Answer 1

将“高度:100%”添加到:

.block table tr td a {
    display: block;
    width: 100%;
    height:100%;
}