可点击的TD，包括文本下方的垂直空间

Question

这是James Donnelly's对a clickable link in a TD question的回答的变体。我发现他的答案无法完全解决的情况。

这是 example in JSFiddle

我在td中添加了垂直对齐方式，在Parent1中添加了许多文本。

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

问题是 Parent2 下的空白是 not 可点击的。我如何也可以点击该部分？指定固定的单位高度是可以的，但是我不想用固定的高度来约束我的桌子。

谢谢！

Answer 1

最简单的解决方案是向onclick中添加cursor: pointer;事件侦听器和td样式。

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

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

Updated JSFiddle