点击时选择整个 <td> 而不是其中的 <a>

Question

好的，事情就是这样，我有一张桌子，里面有一些<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

在您的 <a> 元素上指定 display 或 block，并添加填充代替。删除 <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;
      }
    }
}