Select 单击时整个 <td> 而不是其中的 <a>

Question

我有一个 table，其中有一些 <a>，我想要的是：使包含那些 <a> 的完整 <td> 可点击。

粘贴我的代码会更好地解释我想要什么

<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

在jQuery

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

添加到您的 CSS 以改善用户体验

td { cursor: pointer }

Select 单击时整个 <td> 而不是其中的 <a>

Select the whole <td> on click instead of only the <a> inside of it

css

html-table

twitter-bootstrap