仅使用CSS实现点击表格单元格切换整行多元素背景样式咨询

架构老林

2026-9-24

实现方案

核心逻辑

用隐藏的checkbox作为状态开关，不需要JS即可记录点击切换状态
首单元格内容用label绑定checkbox，点击首单元格即可切换选中状态
通过CSS的:checked伪类配合:has()选择器，匹配当前选中行下的所有td，按位置匹配配色规则即可

完整代码

HTML代码

<table>
    <tr>
        <td>
            <input type="checkbox" id="row1" hidden>
            <label for="row1">1</label>
        </td>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="row2" hidden>
            <label for="row2">2</label>
        </td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <!-- 剩余10行直接按上述格式新增，修改checkbox的id和label的for属性即可 -->
</table>
    
<label>
    <input type="checkbox" hidden>
    <div>click to change (div)</div>
</label>

CSS代码

html {
    text-align: center;
}
table {
    width: 100%;
}
td {
    border: 1px black solid;
}
/* 首单元格label撑满整个单元格，点击单元格任意位置都能触发切换 */
td:first-child label {
    display: block;
    width: 100%;
    cursor: pointer;
}
/* 行选中后的配色规则 */
tr:has(input:checked) td:nth-child(2) {
    background-color: red;
}
tr:has(input:checked) td:nth-child(3) {
    background-color: yellow;
}
tr:has(input:checked) td:nth-child(4) {
    background-color: red;
}
tr:has(input:checked) td:nth-child(5),
tr:has(input:checked) td:nth-child(6) {
    background-color: lime;
}
/* 后续35个单元格的配色直接按上述格式新增nth-child规则即可 */
div {
    background-color: lightgray;
    height: 200px;
}
input:checked + div { background-color: cyan;}