html – 使TD可点击

我用桌子设置了 fiddle.

你看,我试图创建一个用户将悬停的表,然后单击td以显示id.检查小提琴,你会明白.

现在,当用户悬停Parent4时,您可能会注意到桌面上没有文本的空间,用户无法单击它,因此Child4不会出现….

现在,有没有什么方法可以让空间没有可点击的文字,所以它显示了child4？

我试过了

<td ahref="#child4"> but didn't work...

////？编辑因为它有点令人困惑……

我需要你去看小提琴.
您可以看到Parent4的单元格大于文本.因此,当用户在单元格上悬停时我希望文本更改颜色,并且如果用户单击单元格也要更改颜色单元格Child4将不会出现因为单元格不可点击,所以我的问题是,如何使单元格可单击显示Child4？

UPD：

我没有更新小提琴,但它现在是最新的.

解决方法

href属性是为 anchor elements (<a/>)设计的.“ahref”因为你放的应该是< a href =“”>. a是它自己的元素,而不是HTML属性,而href是它接受的属性.

要使td可点击的文本,您可以简单地在其中放置一个锚：

<td>
    <a href="#child4">My clickable text</a>
</td>

编辑：要解决此问题,现在已添加问题,只需添加以下CSS：

td a {
    display:block;
    width:100%;
}

这样做是将锚标记显示为块,允许我们调整宽度,然后将宽度设置为100％,允许它填充剩余空间.

Working JSFiddle.