[HTML] tableau avec titres qu scroll ou non

Logiciel & apps Programmation
1

Salut !

J’ai un gros problème pour faire un tableau un peu spécial, j’ai besoin que les cellules du tableau puissent être déplacées vérticalement sans que le titre des cellules ne se déplace (ca j’arrive à faire).
Mais aussi que les cellules ET le titre des cellules puissent se déplacer horizontalement simultanément. Et ca je vois pas du totu comment faire et si c’est possible, si qq’un a une idée…

2

J’ai pas vraiment testé sous IE mais tu peux utiliser une CSS comme celle-ci:

table { height: 500px; }
table tbody { overflow: auto; }

En séparant bien tes titres dans la partie thead de table dans ton code HTML:

<table>
  <thead>
    <tr>
      <th>Entete1</th>
      <th>Entete2</th>
      <th>Entete3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cellule</td>
      <td>Cellule</td>
      <td>Cellule</td>
    </tr>
    <tr>
      <td>Cellule</td>
      <td>Cellule</td>
      <td>Cellule</td>
    </tr>
    <tr>
      <td>Cellule</td>
      <td>Cellule</td>
      <td>Cellule</td>
    </tr>
    <tr>
      <td>Cellule</td>
      <td>Cellule</td>
      <td>Cellule</td>
    </tr>
  </tbody>
</table>
3

Tu veux changer l’ordre d’affichage des colonnes en fait ?

±-±----±----+
|un|deux|trois|
±-±----±----+

±----±—±-+
|deux|trois|un|
±----±—±-+

4

Un dessin vaux mieux qu’un long discours, ca donne à peu près ca
http://starshine.dyndns.org/TriumAstra/tableau.png

horizontalement, les cellules et leur titre doivent bouger ensemble.

5

Saluton,
Je ne vois pas de solution en simple html css.
J’imagine éventuellement deux boutons, gauche et droite, dont l’événement onclick appliquerait, via javascript, un display-none sur la colonne à faire disparaître et un display:block sur celle à faire apparaître, le tout simultanément sur les deux tableaux. (données et entêtes)
Au lancement de la page les colonnes de droite, hors div, devraient avoir leur style=“display:none”.
Bien sûr dans les navigateurs ayant désactivé javscript ou ne reconnaissant pas les css…

6

Essaye avec des tags <tbody>, <thead>, et overflow. Sinon, essaye en mettant en position: fixed ta rangée d’entête.

7

Dalai-Lama: ma solution fait ça, essaie-la tu verras.
Par contre position: fixed j’avais essayé, ça marche pas terrible; les cellules de titre sont retirées du flux et donc n’ont plus la même largeur que les cellules de contenu.

8

Dans ce cas, tbody + overflow. Sinon, faut forcer la taille et faire un overflow (c’est la meilleure solution)

9

Nan j’ai essayé ca marche pas, si je bouge le haut du tableau horizontalement, le corps du tableau ne bouge pas en même temps…

10

:??:
Un scrinechotte pour voir ?
Tu parles d’IE ou de Firefox ?
J’utilise cette méthode et elle marche très bien sous Firefox :oui:

11

Regarde là :
http://starshine.dyndns.org/TriumAstra/html/test.html

Ca ne bloque même pas la taille, et si je fixe une taille pour le tbody, ca ne fait pas bouger les éléments en même temps horizontalement :neutre:

12

Le height doit être dans le tbody, pas dans le tableau (testé avec le dom inspector). Ceci dit cette solution pratique ne fonctionne pas sous IE…

Le mieux reste de répéter les entêtes toutes les x rangées.

13

Le mettre dans le tbody ne change pas le problème, la scrollbar horizontal ne fait pas bouger l’en tête et le corps du tableau…

14

Tiens:
http://dinofly.planetemu.net/overflow.html
Le seul problème étant l’apparition d’une scrollbar horizontale qui gêne un peu…

15

Y a une solution : ajouter une colonne supplémentaire à l’entête de taille 20px (c’est à peu près la taille d’une scrollbar), et faire un colspan sur la dernière colonne de chaque rangée de valeur.

16

Par contre j’ai testé, ça marche pas sous Konqueror, ni sous Opera, ni sous IE :smiley:
Gecko rulez :wink:

17

C’est surtout qu’ils ne supportent pas tbody apparemment…

18

Je sais faire ca, je le dit depuis le début !
Ce que je veux c’est que la scrollbar HORIZONTALE fasse bouger l’en-tête du tableau et le corps du tableau en même temps !

19

Aaaaah…
Ben moi ce que je fais c’est que pour scroller horizontalement j’utilise la scrollbar de la fenêtre (ou la frame, ou un DIV avec overflow) contenant le tableau, et pas celle du tbody. Et en vertical j’utilise la scrollbar du tbody.

20

Oui, mais le scrollbar vertical du tbody ne sera pas accessible sans avoir d’abord scrollé horizontalement la div, ce qui n’est pas le but recherché.
Et je ne pense pas que l’on puisse dupliqué le scrollbar du tbody à gauche et à droite.
Je persiste à penser que l’objectif de Dalai-Lama n’est pas réalisable, juste en CSS, mais je ne demande qu’à être démenti.