Question

我正在尝试使整个表格单元格可点击。我发现的一般建议是使用display: block;但我见过的所有例子都只有一个行单元格。我的细胞排列似乎让生活变得更加艰难。

考虑这个色彩鲜艳的例子：

<html>
    <head>
        <style type="text/css">
            td { border: 1px; background-color: blue; }
            td a { display: block; background-color: yellow; border: 1px solid red; }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td rowspan=2><a href="#">Left</a></td>
                <td><a href="#">Upper Right</a></td>
            </tr>
            <tr>
                <td><a href="#">Lower Right</a></td>
            </tr>
        </table>
    </body>
</html>

锚标记的块（黄色）全部可点击。但左侧的上方和下方有（蓝色）边距，不可点击。我想我需要一些东西来增加填充以填充左侧的完整td单元格（不改变右侧单元格的大小），但我无法找到正确的咒语来执行此操作。

Answer 1

td a {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: yellow;
    border: 1px solid red;
}

<强> Demo

example

Answer 2

另一个选择是使用jquery或YUI之类的javascript包，并为<td>添加点击监听器而不仅仅是<a>

边距不可点击：Box Model混淆

2 个答案: