选择整个点击而不是仅<a> inside of it</a>

Question

我有一张桌子，我有一些<a>＆＃39; s，我想要的是：点击包含<td>的完整<a>。< / p>

粘贴我的代码将解释我想要的更好

<td>
  <a><span>{{:: row.spread.spread}} ({{:: row.spread.moneyLine}})</span></a>
</td>

现在唯一可点击的区域是带红色边框的区域

这是我的css

  td {
    border-bottom: 0;
    font-weight: bold;
    padding: get-space(x-small) + 2;
    text-align: center;
    vertical-align: middle;

    a {
      border: 1px solid red;
    }

好的，我需要的只是接近完整的td并使它们可点击而不是只能点击链接，这对你来说是否清楚？

Answer 1

从td中移除填充并将其添加到a，如下所示：

td {
    border-bottom: 0;
    font-weight: bold;
    padding: 0;
    text-align: center;
    vertical-align: middle;

    a {
        border: 1px solid red;
        display: block;
        padding: get-space(x-small) + 2;
    }

}

另外，请确保在锚元素上设置display: block。

Answer 2

中的

$('td').click(function() { window.location = $('a',this).attr('href') });

添加到CSS以改进UX

td { cursor: pointer }