是否有可能擴大和摺疊表格行/數據只有CSS？

Question

我小的通用表格，它看起來是這樣的：

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

我希望能夠點擊每個表中的數據擴展的附加信息。我可以只用CSS來做到這一點，還是我必須求助於JavaScript？

Answer 1

我不認爲你可以用CSS來實現這一點。
但與jQuery的slideToggle()，這是一塊蛋糕！

Answer 2

您可能會需要JavaScript（如果您打算在點擊後讓項目保持打開狀態，肯定會這樣做）。但是爲了演示有些情況下可以純粹用CSS來完成，這可以在CSS3瀏覽器中工作（僅在按住鼠標按鈕的同時）。

See the fiddle.

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