because it's easier explain when have seen it, here's jsfiddle.
description
i have table thead , tbody. wanted use checkbox-hack inside table "select" rows. when opening devtools on site, can see input on top of table, moved outside of table browser on page load.
some code
<!-- moved <input type="checkbox" id="generated-id"> <--------------+ | --> <!-- | --> <table> <!-- | --> <thead> <!-- | --> <th>columns</th> <!-- | --> ... <!-- | --> </thead> <!-- | --> <!-- | --> <tbody> <!-- | --> <input type="checkbox" id="generated-id"> <!-- ---+ --> <tr> <td> <label for="generated-id"> highlight row </label> </td> </tr> </tbody> </table> question
is there way can use checkbox-hack inside table? point out, use js, make unusable users without js (and sadly exist).
no, cannot use the checkbox-hack inside table
you answered question comment above:
putting checkbox in
tdsolve problem of being moved, remove checkbox-hack possibilty…
but…
you can use alternative css-only hack apply styles entire row based on user selection.
by using :focus pseudo-class in conjunction general sibling selector ~, , applying tabindex="0" 1 (or all) of td elements in row, entire row — in effect — can styled based on user interaction.
a user can click , tab through rows highlight them.
for example:
td[tabindex] { cursor: pointer; } td:focus, td:focus ~ td { background-color: tomato; }<table> <thead> <th>column 1</th> <th>column 2</th> </thead> <tbody> <tr> <td tabindex="0"> highlight row </td> <td> text in cell </td> </tr> </tbody> </table>
Comments
Post a Comment