Question

我有一些像这样的标记：

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

还有一些CSS：

td, th{
    border: 1px solid red;
}

.main td{
    height: 50px;
    width: 300px;
    vertical-align: top;
}

.main td{
 border-bottom: 0;   
}

.more td{
    border-top: 0;
    height: 0;
}

.more-link{
    position: relative;
    top: -30px;
}

.more-link:focus + div, .more-link:active + div{
    height: auto;
}

我想要做的是，当点击“显示更多信息”链接时，名为“更多”的表格行会展开。

问题：

如果我将td设置为more以使其高度为0，则无效;
如果我将more-info div的高度设置为0或display:none，则表格行仍会占用空间。

我想用CSS做这个，javascript可以用来使它更好，但基本应该只在没有javascript的情况下工作。

如果点击more链接，如何才能展开show more info行？

小提琴：http://jsfiddle.net/QJr2e/

Answer 1

知道了！

我没有使用position:relative来移动“显示更多信息”链接，而是给了它float:left。这允许我使用margin将其移动到任何我想要的位置，同时重新组织流程。

我只是将height设置为more-info，而不是使用display:none，然后点击“显示更多信息”链接：

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

表格只用CSS扩展行

1 个答案: