Pur CSS HTML Cellule de la Table de déplier/replier Sur Cliquez sur

Je suis, certes, pas bien du tout avec les CSS. Je sais qu'il y a des questions similaires et des exemples là-bas, mais je n'ai pas été en mesure de faire quelque chose qui fonctionne avec mon exemple, en dépit de l'abondance de l'essayer. Votre aide est grandement appréciée.

Veuillez jeter un oeil à ce violon: http://jsfiddle.net/4h75G/2/

Si vous passez la souris sur le "Data1,1" cellule dans le tableau du bas, il s'étend automatiquement pour afficher la totalité du contenu de la cellule. Cependant, ce que je voudrais être en mesure de le faire plutôt que de s'étendre sur le vol stationnaire est, au contraire, être en mesure de cliquer une fois pour élargir la cellule, puis cliquez une deuxième fois pour contrat ou de le réduire à son état d'origine. Je voudrais le faire avec uniquement du CSS et pas de Javascript.

Merci!

HTML:

        <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td>Data1,1</td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>
    </br>
    <table>

    <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    </tr>

    <tr>
    <td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
    <br/>Data1,1 second line - this is a kind-of long line too
    <br/>Data1,1 third line
    <br/>Data1,1 fourth line</span>
    </div>
    </td>
    <td>Data2,1</td>
    <td>Data3,1</td>
    </tr>

    <tr>
    <td>Data1,2</td>
    <td>Data2,2</td>
    <td>Data3,2</td>
    </tr>

    <tr>
    <td>Data1,3</td>
    <td>Data2,3</td>
    <td>Data3,3</td>
    </tr>

    </table>

CSS:

    body,table{
        font-family:verdana,arial,sans-serif;
        font-size:12px;
        border-collapse:collapse;
    }

    td,th{
        padding:3px 3px;
        margin:0px;
        border:1px solid #BBB;
        white-space:nowrap;
    }

    .content{
        height:15px;
        width:100px;
        overflow:hidden;
        text-overflow:ellipsis
    }

    .content:hover{
        height:auto;
        width:auto;
    }

Si vous souhaitez lier cela à cliquer sur les événements que vous pourriez être coincé le faire avec Javascript.
Ce n'est pas possible avec pur CSS. La seule façon que cela pourrait être fait en utilisant la :target pseudo classe (et qui ne vous permettent d'étendre, pas de contrat) ou par l'abus du statut vérifié caché d'une radio de l'élément. À l'aide de JavaScript est de la bonne, de la sémantique pure façon de le faire.
Je pense qu'il pourrait être ok, si je suis seulement en mesure de se développer sans contractantes de la cellule. Peut-être vous pouvez montrer comment cela pourrait fonctionner? Merci.
css-tricks.com/on-target

OriginalL'auteur dizzy.stackoverflow | 2013-10-17

8

Vous pourriez obtenir quelque chose comme ça sans script en jouant avec css masqué-éléments, qui peuvent garder l'état (comme une case à cocher), mais je pense que vous êtes beaucoup mieux de faire cela simplement en basculant d'une classe dans le script.

Si vous vous envelopper .content dans un label, ajouter une case à cocher et de le cacher comme ceci:
```
input[type='checkbox'] { visibility: hidden; position: absolute; }
input[type='checkbox']:checked + .content { height: auto; width: auto;}
```
Vous pouvez obtenir ce que vous voulez, mais il est sacrément moche. Voir http://jsfiddle.net/4h75G/13/ pour un exemple de cette pratique douteuse appliqué à votre exemple.

Génial! Que dire de ce qui est douteux? Le masquage de la case? Ou tout simplement l'ensemble du concept est mauvais? Pensez-vous que cela va être problématique dans tout navigateur ou le client de messagerie les moteurs de rendu HTML?
C'est un abus de concepts au moins:) Il est préférable de faire de comportement dans le script, de garder la présentation (CSS, également, les anciens IE ne sera pas lire le :vérifié pseudo-sélecteur) et de garder le marquage gratuit de tous les éléments qui ne correspondent pas à la structure ou le contenu. Si vous mettez un nom de classe comme active ou expanded sur le contenu que vous souhaitez afficher, vous obtenez un beaucoup plus intuitive de la séparation.

OriginalL'auteur tobi
0

Je pense que vous ne pouvez pas le faire sans javascript.

Avec jQuery, il peut être fait comme ici - http://jsfiddle.net/4h75G/12/
```
$(".content").click(function(){
    $(this).toggleClass('active');
});
```
Même si dans ma question, j'ai indiqué que je voudrais faire cela en pure CSS, je serais encore à être intéressé à voir comment c'est fait avec du Javascript, donc, je vous remercie pour cet exemple. Toutefois, malheureusement, il ne fonctionne pas dans Firefox ou Chrome. 🙁
Il suffit de changer .content:hover dans votre CSS pour .active 🙂
Merci 🙂 C'est un peu plus proche, mais a encore des questions: jsfiddle.net/4h75G/28
Comme ceci: jsfiddle.net/4h75G/29 (pas .content:active, mais .active)
Oui! Je suis désolé, je n'ai pas l'attraper. Bien sûr qui a de sens et ne fonctionne pas. Merci!

OriginalL'auteur Ilya
0

Je suis en utilisant ceci:
```
<td><a href='#' onclick="$('#elDiv').slideToggle(200);return false;">+</a></td>
```
.slideToggle() documentation

Espérons que cette aide!

OriginalL'auteur Nicoli

-1

Je cherchais un plus stylisé, approche de ce que vous voulez, mais était à la recherche d'un ralentissement de la transition d'ouverture et de fermeture de balises TD. Il a été réalisé à l'aide de JS et HTML.

Si vous cliquez sur le vert de la colonne, elle va ouvrir et cliquer sur le bouton rouge il se ferme au dos. Le cliquables colonnes de simplement afficher la JS appels de fonction.

Mon JSFiddle exemple...

HTML

<table cellpadding='0' cellspacing='0' style='width: 500px;'>
    <tr>
        <td colspan='3' style="background: #ddd; ">top content</td>
    </tr>
    <tr>
        <td style="background: #fcc;  vertical-align: top;" 
             onclick="reducer('as', 10, 50);">col1</td>
        <td id='as' style="background: #cfc; vertical-align: top;" 
             onclick="expander(this.id, 500, 50);">col2</td>
        <td style="background: #ccf; width:200px;">col3</td>
    </tr>
    <tr>
        <td colspan='3' style="background: #ddd; ">bottom content</td>
    </tr>
</table>

JS

function expander(id, maxheight, time) {
    var slice = document.getElementById(id);
    var height = Number(slice.style.height.replace('px', ''));
    var expandRate = maxheight / time;
    var i = 0;

    var timer = setInterval(function () {
        height = height + expandRate;

        if (i < time) {
            i++;
            slice.style.height = height + 'px';
        } else {
            clearInterval(timer);
        }
    }, 1);
}

function reducer(id, minHeight, time) {
    var slice = document.getElementById(id);
    var height = Number(slice.style.height.replace('px', ''));
    var collapseRate = Math.abs(height - minHeight) / time;
    var i = 0;

    var timer = setInterval(function () {
        height = height - collapseRate;

        if (i < time) {
            i++;
            slice.style.height = height + 'px';
        } else {
            clearInterval(timer);
        }
    }, 1);
}

OriginalL'auteur kurt

Vous devez vous connecter pour publier un commentaire.