Clickable TD including the vertical space under the text

Question

This is a variation of James Donnelly's answer to a clickable link in a TD question. I found a case where his answer doesn't completely work.

Here is the example in JSFiddle

I added vertical-align to td and lots of text to Parent1.

table.coolTable td {
        vertical-align:top;
        ...

The problem is that the empty space under Parent2 is not clickable. How do I get that part clickable too? Specifying fixed unit heights works but I don't want to constrain my table with fixed heights.

Thanks!

You want the gap between clickable elements to be clickable? Why? — wordbug, Jul 18 '18 at 17:05
Oh, I get what you mean, although I've had to resize the fiddle to see it: the `` element doesn't expand to fit its container. — wordbug, Jul 18 '18 at 17:09

score 1 · Accepted Answer · answered Jul 20 '18 at 15:16

1

The easiest solution would be to add onclick event listeners and a cursor: pointer; style to the tds.

HTML
<td onClick="document.location.href='#child'">
  ...
</td>

CSS
table.coolTable td {
  ...
  cursor: pointer;
}

Updated JSFiddle

answered Jul 20 '18 at 15:16

Joseph Webber

2,010
1
19
38

You get a Sesame Street Martian "yip yip yip yip yip" for this! – ssimm Jul 20 '18 at 15:32

Clickable TD including the vertical space under the text

1 Answers1

Linked