点击时选择整个 <td> 而不是其中的 <a> [重复]答案

【问题标题】：Select the whole <td> on click instead of only the <a> inside of it [duplicate]点击时选择整个 <td> 而不是其中的 <a> [重复]
【发布时间】：2015-04-29 10:30:23
【问题描述】：

我有一张桌子，里面有一些<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 并使其可点击，而不是只能点击链接，你明白了吗？

【问题讨论】：

标签： css twitter-bootstrap html-table

【解决方案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。

【讨论】：

【解决方案2】：

在 jQuery 中

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

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

td { cursor: pointer }

【讨论】：