html - Making a TD clickable

Question

I've set up a fiddle with a table.

You see, Im trying to make a table where the user will hover and click the td to show an id. Check the fiddle out and you'll understand.

Now, When the user hovers Parent4, you may notice there's space on the table where there's no text and the user can't click it so the Child4 wont appear....

Now, is there any way I can make the space where there's no text clickable so it shows up child4?

I tried

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

////?EDIT As its a bit confusing...

I need you to see the fiddle. You can see the cell for Parent4 is bigger than the text. So when the user hovers on the cell I want the text to change color and the cell to change color too + if the user clicks the cell Child4 won't appear because a cell is unclickable, so My question, how can I make the cell clickable to display Child4?

UPD:

I didn't update the fiddle, but it's now up to date.

Answer 1

The href property is designed for anchor elements (<a/>). "ahref" as you've put should be <a href="">. a is an element of its own, not a HTML attribute, and href is an attribute it accepts.

To make the text of a td clickable you can simply put an anchor within it:

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

Edit: To fix this now that the question has been added, simply add in the following CSS:

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

What this does is display the anchor tag as a block, allowing us to adjust the width, and then set the width to 100%, allowing it to fill the remaining space.

Working JSFiddle.