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

Question

好的，我有一个 table，其中有一些 <a>，我想要的是：使包含那些 [=15] 的完整 <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 of 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;
      }
    }
}

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

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

css

sass

twitter-bootstrap