Je možné rozšíriť a zbaliť riadky / dáta tabuľky len s css? - html, css

Mám malú generickú tabuľku, ktorá vyzerá takto:

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

Chcem byť schopný kliknúť na jednotlivé údaje tabuľky a rozšíriť tak ďalšie informácie. Môžem to urobiť len pomocou css alebo musím použiť javascript?

odpovede:

Nemyslím si, že to dokážete dosiahnuť pomocou css.
Ale s jQuery slideToggle(), je to hračka!

Pravdepodobne budete chcieť javascript (a určiteak chcete, aby položka zostala otvorená aj po kliknutí). Ale aby sme demonštrovali, že existujú prípady, kde je to možné vykonať len pomocou CSS, bude to fungovať v prehliadačoch CSS3 (len pri stlačení tlačidla myši).

Pozrite sa na husle.

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;
}