Your 'pen has `td { position: relative; }` so the link's pseudo-element is not actually covering the row, the row only gets the visual styling that makes it appear clickable.
If you remove the positioning from the `td` and add `tr { position: relative; }` then you'll find you can activate the link by clicking anywhere in the row but you can't select the text in the row (because the link's pseudo-element is "covering" it). However, if you start a text selection outside the table, you can select the whole table (or the first however many rows you want).
This post includes some JavaScript as a progressive enhancement that tries to differentiate text selection from clicks.
extra88|1 year ago
If you remove the positioning from the `td` and add `tr { position: relative; }` then you'll find you can activate the link by clicking anywhere in the row but you can't select the text in the row (because the link's pseudo-element is "covering" it). However, if you start a text selection outside the table, you can select the whole table (or the first however many rows you want).
This post includes some JavaScript as a progressive enhancement that tries to differentiate text selection from clicks.
https://css-tricks.com/block-links-the-search-for-a-perfect-...