Checkbox-Hack无法在表内工作

Question

因为当你看到它时更容易解释，这里是jsfiddle。

描述

我有一张包含thead和tbody的表格。现在我想使用表中的checkbox-hack来“选择”行。但是，当在站点上打开devtools时，您可以看到input位于表的顶部，在页面加载时由浏览器移出表外。

一些代码

<!--
                                                  moved up
<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 this row
                </label>
            </td>
        </tr>
    </tbody>
</table>

问题

有什么办法可以在桌子里面使用复选框 - hack吗？只是指出这一点，我可以使用JS，但这会使它无法用于没有JS的用户（而那些可悲的存在）。

Answer 1

不，您不能在表

中使用the checkbox-hack

您在上面的评论中回答了问题：

  

将复选框放在td中会解决它被移动的问题，但会完全删除复选框黑客的可能性......

但是...

您可以使用另一种仅限CSS的黑客方式根据用户选择将样式应用于整行。

将:focus伪类与一般兄弟选择器~结合使用，并将tabindex="0"应用于一个（{1}}元素中的td元素行，整个行 - 实际上 - 可以根据用户交互设置样式。

用户可以点击甚至标记行以突出显示它们。

例如：

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 this row
            </td>
            <td>
                Some text in a cell
            </td>
        </tr>
    </tbody>
</table>