4 ms·
You can also do Solution 1 without JavaScript by using a CSS pseudo selector on the anchor tag: tr { position: relative; } a:before {
by stevesunderland 2y ago
You can also do Solution 1 without JavaScript by using a CSS pseudo selector on the anchor tag:
tr {
position: relative;
}
a:before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
https://codepen.io/stevesunderland/pen/oNrVQrp https://codepen.io/stevesunderland/pen/oNrVQrp
- extra88 2y agoYep, basically the "block links" technique used to make clickable cards. A downside is it prevents selecting any text covered by the pseudo-element; the JavaScript technique can have the same problem. > top: 0; bottom: 0; > left: 0; right: 0; You can replace this with inset: 0;
- stevesunderland 2y agoThanks for the tip! That will save me quite a few keystrokes :) I don't see any issues selecting the text?
- extra88 2y agoYour '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. https://css-tricks.com/block-links-the-search-for-a-perfect-solution/ https://css-tricks.com/block-links-the-search-for-a-perfect-...