表仅使用CSS展开行

我有一些这样的标记：

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        <tr>
    </thead>  

    <tbody>
        <tr class="main">
            <td>some content</td>
            <td>some content2</td>
        <tr>
        <tr class="more">
            <td colspan="2">
                <div class="more-link"><a tabindex="0" href="#">Show more info</a></div>
                <div class="more-info">
                    more info goes here
                </div>
            </td>
        <tr>
    </tbody>
</table>

我想做的是，当单击ShowMoreInfo链接时，名为more的表行将展开

问题是：

如果我将td inside more设置为高度为0，则没有效果； 如果我将“更多信息”div的高度设置为0，或者display:none，表行仍然会占用空间。 我只想用CSS来做这件事，javascript可以使它变得更好，但是基本的东西不需要javascript就可以工作

单击“显示更多信息”链接时，如何使更多行展开

还有一把小提琴：

明白了

我没有使用position:relative来移动showmoreinfo链接，而是给它一个float:left。这允许我使用边距将其移动到任何我想要的地方，同时重新组织流

我没有使用高度，而是将“更多信息”设置为“显示：无”，然后单击“显示更多信息”链接：

.more-link:active + div, .more-link:focus + div{
    display: block;
}

明白了

我没有使用position:relative来移动showmoreinfo链接，而是给它一个float:left。这允许我使用边距将其移动到任何我想要的地方，同时重新组织流

我没有使用高度，而是将“更多信息”设置为“显示：无”，然后单击“显示更多信息”链接：

.more-link:active + div, .more-link:focus + div{
    display: block;
}

---

你不能用css捕捉点击，但你可以用css捕捉鼠标悬停。您可以使用height，overflow:hidden with:hover css pseudo class并在鼠标上方展开行。他是正确的。。css不会在点击事件中拾取。。但是鼠标悬停是一个css事件，你可以建立它…我尝试设置overflow:hidden和height，但是这只是删除了show more info链接，没有改变高度。不，我们可以使用：focus和：active来捕获点击，比如：@tpaksu你不能捕获点击事件，但你可以捕获目标target@Nightfirecat我不知道！凉的你不能用css捕捉点击，但你可以用css捕捉鼠标悬停。您可以使用height，overflow:hidden with:hover css pseudo class并在鼠标上方展开行。他是正确的。。css不会在点击事件中拾取。。但是鼠标悬停是一个css事件，你可以建立它…我尝试设置overflow:hidden和height，但是这只是删除了show more info链接，没有改变高度。不，我们可以使用：focus和：active来捕获点击，比如：@tpaksu你不能捕获点击事件，但你可以捕获目标target@Nightfirecat我不知道！凉的