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-infodivの高さを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 に答える