Переключить ячейки таблицы, используя чистый CSS - PullRequest
Новая
       1

Переключить ячейки таблицы, используя чистый CSS

1 голос
/ 05 октября 2019

Есть ли способ переключить (Показать / Скрыть) столбец или строку таблицы с флажком, используя 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>

Как переключить столбец или строку таблицы?

1 Ответ

0 голосов
/ 05 октября 2019

Ваш селектор неверен, он должен быть #trigger:checked ~table .box

Сначала ищите следующего брата, затем потомка этого брата, если он находится внутри. 

.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>
...