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

添加＆＃34;身高：100％＆＃34;致：

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

Answer 2

Demo Fiddle

首先从float: left;

中删除.block table tr td

然后将height:100%;添加到.block table tr td a

Answer 3

你需要在块表中添加一个高度：100％;

整个TD作为可伸缩表中的超链接

3 个答案:

Demo Fiddle