css - 单击时选择整个 <td> 而不是仅选择其中的 <a>

Question

好的，事情是这样的，我有一张 table ，里面有一些 <a>的，我想要的是:使完整的 <td> 可点击其中包含那些 <a>的。

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

<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

指定 display的 block在你的 <a>元素，然后添加填充。删除 <td> 上的填充也可能是值得的元素:

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

    a {
      padding: get-space(x-small) + 2;
      display: block;
    }
}

如果需要保留红色边框，定位<span>元素:

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

    a {
      padding: get-space(x-small) + 2;
      display: block;

      span {
        border: 1px solid red;
      }
    }
}