选择整个< td>而不是只有< a>里面的

问题描述

确定这里是东西，我有一个表，其中我有一些< a> 的，我想要的：make clickable the full < td> 其中包含< a> 的。

ok here is the thing, I have a table where I have some <a>'s, what I want: make clickable the full <td> which contains those <a>'s.

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

Pasting my code will explain what I want better

<td>
  <a><span>{{:: row.spread.spread}} ({{:: row.spread.moneyLine}})</span></a>
</td>

现在，唯一的可点击区域是带有红色边框的区域

for now the only clickable area is the one with red border

>

here my css

here my 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 并使他们可点击，而不是只能点击链接，是清楚的你们的人？

ok, all I need is take approach of the full td and make them clickable instead of only be able to click over the links, is that clear for you folks ?

推荐答案

指定显示 / code>在您的< a> 元素，并添加填充这些。也许值得删除< td> 元素上的填充：

Specify a display of block on your <a> elements, and add the padding those instead. It might also be worthwhile to remove the padding on the <td> element:

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> 元素：

If you need to retain the red border, target the <span> element:

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;
      }
    }
}

这篇关于选择整个&lt; td&gt;而不是只有&lt; a&gt;里面的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！