css - 使用纯 CSS 切换表格单元格

Question

有没有什么方法可以使用 CSS 而不是 JavaScript 来切换(显示/隐藏)带有复选框的表列或行？

我已经完成了以下代码，它适用于 div 但不适用于列或行

    <label for="trigger">Toggle box</label>

<input id="trigger" type="checkbox">
<div class="box">
Harry I've got Toggled
</div>

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr >
           <td class="box"> I am a column1, I've got same class but sadly did not get toggled! do you know why?</td>
            <td>  I am a column 2 I don't have any class</td>
        </tr>
    </tbody>
</table>
<style>

.box {
  display: none;
}
#trigger:checked + .box {
  display: block;
}
table,
td {
    border: 1px solid #333;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}
</style>

如何切换表格列或行？

Answer 1

你的选择器不正确，应该是#trigger:checked ~table .box

首先寻找下一个 sibling ，然后寻找那个 sibling 的 child ，如果它站在里面。

.box {
  display: none;
}
#trigger:checked ~ .box,
#trigger:checked ~table .box {
  display: block;
}
table,
td {
    border: 1px solid #333;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

<label for="trigger">Toggle box</label>

<input id="trigger" type="checkbox">
<div class="box">
Harry I've got Toggled
</div>

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr >
           <td class="box"> I am a column1, I've got same class but sadly did not get toggled! do you know why?</td>
            <td>  I am a column 2 I don't have any class</td>
        </tr>
    </tbody>
</table>