Tabelle erweitern Zeile mit CSS

Habe ich einige markup-wie so:

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

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

Was ich tun möchte, ist, dass, wenn die "mehr info" - link geklickt wird, wird die Zeile in der Tabelle namens "more" erweitert.

Probleme:

  • Gibt es keinen Effekt wenn ich die td innen more eine Höhe von 0;
  • Wenn ich die Höhe der more-info div 0 oder display:none die Zeile in der Tabelle noch Platz kostet.

Möchte ich dies mit CSS, javascript kann verwendet werden, um es besser zu machen, aber die Grundlagen sollten einfach funktionieren ohne javascript.

Wie kann ich meine more Zeile zu erweitern, wenn die show more info link geklickt?

Und ein Turnschuh: http://jsfiddle.net/QJr2e/

  • Sie können nicht fangen einen auf, mit nur css, aber Sie können fangen eine Maus-hover mit css. und Sie können height,overflow:hidden mit :hover css-pseudo-Klasse und erweitern Sie die Zeile, die auf die Maus über.
  • Er ist korrekt. css nicht pickup auf ein click-Ereignis.. Aber mouse-hover ist ein css-Ereignis, und Sie können bauen Sie aus, dass...
  • Ich habe versucht overflow:hidden und height, aber das nur entfernt die show more info link und Tat nichts, um die Höhe zu ändern. Und Nein, wir können :focus und :active zu erfassen "klickt" nur mit css so: cssplay.co.uk/menus/cssplay-Klick-flyout.html#url
  • Sie können nicht erfassen, ein Klick-Ereignis, aber Sie können erfassen, ein Ziel. (:target)
  • Ich wusste nicht, dass! cool!
InformationsquelleAutor F21 | 2012-04-30
  1. 0

    Hab!

    Anstatt position:relative zu bewegen, die "mehr info" - link, habe ich es mir float:left. Dies erlaubte mir ihn zu bewegen, wo ich es will mit margin, während die Neuorganisation der Strömung.

    Anstatt height, ich habe gerade more-info zu display:none, und dann, wenn die "mehr info" - link geklickt wird:

    .more-link:active + div, .more-link:focus + div{
    display: block;
}
    InformationsquelleAutor F21
Schreibe einen Kommentar