Hauteur d'une case d'un tableau

**SlimEmShady** · 03/11/2016, 15h16

Bonjour,

Aujourd'hui, me voilà confronté à un petit soucis que je n'arrive pas à régler...
J'ai un tableau (alimenté de données en PHP), qui comporte une case "Commentaire".
Cette case contient parfois des commentaires très longs, ce qui fait une énorme case à mon tableau en hauteur.
Je dispose d'une fonction pour augmenter la taille d'une case d'un tableau en cliquant sur une image.
Cette fonction est simple à utiliser, c'est juste une classe "redimensionnable" à ajouter à la case en question.
De ce côté-là, pas de problème, quand j'ai une petite case, si je souhaite l'agrandir, ej clique sur la flèche et ça fonctionne.

Le problème, c'est qu'en cas de commentaire beaucoup trop long, la case de mon tableau s'adapte au contenu, et donc la case est énorme dès le début...
Ce que je souhaite, c'est garder une petite case à chaque ligne de mon tableau (et donc cacher une partie du commentaire), et afficher le commentaire entier quand je clique sur mon image qui redimensionne les cases.

Pour simplifier le code HTML du tableau, voici le suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<table class="tableWithFloatingHeader w_skinnedTable" id="matrice_tdb">
    <thead>
        <tr class="top">
            <!--En-tête vide sur 4 colonnes-->
            <th colspan="4" class="col-dark-blue">&nbsp;</th>
            <!--En-tête sur 12 colonnes-->
                            <th colspan="3" class="col-dark-green">Suivi du mensuel</th>
                        <!--En-tête sur 4 colonnes-->
            <th colspan="4" class="col-dark-blue">Suivi fin de mois Mars</th>
            <!--En-tête sur 4 colonnes-->
            <th colspan="4" class="col-dark-green">Suivi annuel</th>
 
            <!--En-tête vide sur 1 colonne-->
            <th colspan="1" class="last col-dark-blue">&nbsp;</th>
        </tr>
        <tr>
            <th class="special_col col-light-blue">Indicateur</th>
            <th class="min_col col-light-blue">Unité</th>
            <th class="min_col col-light-blue">Type de collecte</th>
            <th class="min_col col-light-blue" title="Réalisé l'année précédente">Réal. n-1</th>
            <th class="min_col  col-light-green" title="Janvier">Jan.</th><th class="min_col  col-light-green" title="Février">Fév.</th><th class="min_col  col-light-green" title="Mars">Mar.</th>            <th class="min_col col-light-blue" title="Réalisé">Réal.</th>
            <th class="min_col col-light-blue" title="Objectif mensuel">Obj.</th>
            <th class="min_col col-light-blue" title="R/O mensuel">R/O</th>
            <th class="min_col col-light-blue" title="Tendance">Tend.</th>
            <th class="min_col col-light-green" title="Objectif annuel">Obj. annuel</th>
            <th class="min_col col-light-green">R/O annuel</th>
            <th class="min_col col-light-green">R2</th>
            <th class="min_col col-light-green" title="Point de Sortie">PDS</th>
            <th class="special_col col-light-blue">Commentaire</th>
        </tr>
    </thead>
    <tbody>
         <tr class="long_com">
               <td>indicateur x</td>
               <td>euros</td>
               <td>sans objet</td>
               <td>0</td>
               <td>350</td>
               <td>400</td>
               <td>200</td>
               <td>550</td>
               <td>560</td>
               <td>90%</td>
               <td>en hausse</td>
               <td>700</td>
               <td>60%</td>
               <td>650</td>
               <td>630</td>
               <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </td>
         </tr>
    </tbody>
</table>

La partie "Commentaire", avec tous les "xxxx" donc, est énorme dans mon tableau. Je voudrais la réduire le plus possible afin d'en afficher que les quelques premières lignes par exemple, et tout afficher au clic sur mon image.
J'ai essayé quelques trucs en CSS mais rien ne bouge.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.long_com {
    height: 20px;
    overflow: hidden;
}

Toutes les données sont fictives.

Merci de votre aide !

Bonne journée

**NoSmoking** · 05/11/2016, 11h43

Bonjour,
mets ton contenu « long » dans un conteneur dimensionné.

**SlimEmShady** · 07/11/2016, 11h40

Alors, nous voilà Lundi, et j'ai pu essayer ta technique !
Merveille, ça marche, ma case fait bien la taille que je veux désormais, et avec un overflow: hidden je peux cacher le contenu en trop.
Cependant, quand j'agrandis ma case à l'aide de ma petite flèche bleue, le contenu reste caché. La case prend bien la bonne taille, mais je ne vois pas comment enlever l'overflow: hidden de ma div..

[EDIT] J'arrive via ma fonction JavaScript redimensionnable() et avec jQuery à afficher / cacher le commentaire quand j'augmente ou je diminue la case de mon tableau. Le hic, c'est que quand je l'agrandis, le commentaire s'affiche dans ma grande case, mais il commence au milieu du tableau, il n'est plus du tout centré :/

Nom : Capture.PNG
Affichages : 253
Taille : 94,0 Ko