Възможно ли е да се разширяват и свиват редове / данни от таблици само с css? - html, css

Имам малка обща маса, която изглежда така:

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

Искам да мога да кликна върху всяка таблица, за да разширя допълнителна информация. Мога ли да направя това само с css или трябва да прибягна до javascript?

Отговори:

Не мисля, че можете да постигнете това с css.
Но с jQuery "s slideToggle(), лесна работа!

Вероятно ще искате javascript (и определеноако искате да останете отворени, след като щракнете върху тях). Но за да покажем, че има случаи, в които може да се направи само с CSS, това ще работи в CSS3 браузъри (само докато държите натиснат бутона на мишката).

Виж циферблата.

HTML

<table>
<tr>
<td>1<div>More info on 1</div></td>
<td>2<div>More info on 2</div></td>
</tr>
<tr>
<td>1<div>More info on 1</div></td>
<td>2<div>More info on 2</div></td>
</tr>
</table>

CSS

td {
vertical-align: top;
}
td > div {
height: 0;
overflow: hidden;
}

td:active > div {
height: auto;
}