2

我有一些这样的标记：

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

4

1 回答 1

0

知道了！

我没有使用position:relative移动“显示更多信息”链接，而是给了它一个float:left. margin这使我可以在重新组织流程的同时将其移动到任何我想使用的地方。

我没有使用height，而是设置more-info为display:none，然后单击“显示更多信息”链接时：

.more-link:active + div, .more-link:focus + div{
    display: block;
}
于 2012-04-30T03:15:22.633 回答