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

Question

这是James Donnelly对TD问题中可点击链接的回答的变体。我发现了一个案例，他的答案并不完全有效。

以下是JSFiddle中的示例

我在td中添加了垂直对齐，在Parent1中添加了大量文本。

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

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

谢谢！

Answer 1

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

HTML
<td onClick="document.location.href='#child'">
...
</td>
CSS
table.coolTable td {
...
cursor: pointer;
}

更新的JSFiddle