Toujours voir les entêtes des tables

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Toujours voir les entêtes des tables

xavibla2

Bonjour,

Voila j'explique mon problème. Grâce à PHP et HTML je crée une table sur une page. Ce tableau a de forte chance d'avoir une taille importante et je voudrais toujours pouvoir voir les entètes de ma table.

Je voudrai donc toujours afficher la colonne ou ligne d'entète même après avoir scroller la page.

Je n'ai aucune idée de la technique à adopter.

Merci pour votre aide.

Publicité

gatsu35

Blablaté par Harko

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title></title>
    <style>
    * {
        margin:0; padding:0;
    }
    #tableau{
        width:376px;
        border-collapse: collapse;
    }
    #tableau TH{
        border:1px solid black;
    }
    .col1{ width:70px; }
    .col2{ width:100px; }
    .col3{ width:200px; }
    #tableauIn{
        width:396px;
        overflow:auto;
        height:200px;
    }
    #tableauIn table{
        width:376px;
        border-collapse: collapse;
    }
    #tableauIn TD{
        border:1px solid black;
    }
    </style>
</head>

<body>

<table id="tableau" cellspacing="0">
    <thead>
        <th class="col1">type</th>
        <th class="col2">vaccin</th>
        <th class="col3">animaux</th>
    </thead>
</table>
<div id="tableauIn">    
<table cellspacing="0">
    <tbody>
        <tr>
            <td class="col1">truc 1</td>
            <td class="col2">truc 2</td>
            <td class="col3">truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
        <tr>
            <td>truc 1</td>
            <td>truc 2</td>
            <td>truc 3</td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>

xavibla2

Ces lignes m'ont permis d'avancer un peu dans ce que je voulais réaliser mais malheureusement, je pense qu'on ne peut pas appliquer ceci pour que le tableau soit scrollable dans les 2 sens tout en gardant chaque fois les entetes. Il est fort possible que je me trompe, mais je n'est pas réussi a le faire.

Merci de m'aider encore une fois.

gatsu35

Blablaté par Harko

qu'est ce que tu entends qu'il soit scrollable dans les 2 sens ?
horizontal et vertical ?
toute en gardant l'entete horizontal qui alors se déplacerait en même temps que le tableau ?

Ah oui c'est beaucoup plus compliqué que ça n'y paraît, faudrait jouer avec le javascript dans ce cas, et pardon pour toi, tu vas avoir du mal alors

gatsu35

Blablaté par Harko

http://gatsu.ftp.free.fr/html/test_tableau.html

xavibla2

Ouais donc je te remercie pour avoir déjà en parti résolu mon problème.

Mais mon nouveau problème est que j'ai des entêtes en haut mais aussi à gauche du tableau:

|______| type1 | type2 | type3 | type4 |
| type5 |______|______|______|______|
| type6 |______|______|______|______|
| type7 |______|______|______|______|

Bon voici en fait la structure de mon tableau. Je souhaiterais donc pouvoir toujours voir les entêtes des cellules affichées à l'écran.
Par exemple lorsque je scroll verticalement les entêtes du haut doivent toujours être visible (ce que tu m'as déjà aidé à faire ) mais il faut aussi que les entêtes du haut se décale lorsque je scroll horizontalement tout en gardant visible les entêtes de gauche.

Je remercie d'avance quiconque m'aidera à résoudre mon problème.

gatsu35

Blablaté par Harko

no problème tu attends c'est tout

gatsu35

Blablaté par Harko

http://gatsu.ftp.free.fr/html/test_tableau.html l'idée est là mais la conception laisse à désirer,

gatsu35

Blablaté par Harko

http://gatsu.ftp.free.fr/html/test_tableau.html
Version améliorée
Cette fois-ci il calcule la largeur du bloc de droite
la hauteur du bloc du gauche
et en plus il calcul la largeur des cellules du bloc de droite en fonction des cellules du tableau centre, idem pour le tableau de gauche.

De plus il faut faire attention à la structure du tableau maintenant.

il y a un div qui englobe 3 div, ce div a un id
les 3 autres divs ont des classes associées, respectivement top, left et center

A toi de regarder. mais normalement mon script fonctionne pour plusieurs tableaux dans une meme page.

Attention néanmoins, je n'ai pas testé sous safari et opera. merci

nargy

C est très joli. J étais en train de faire des tests avec le même genre de méthode: des divs en position relative dans les cases d entête. Mais avec FireFox les touches n activent pas la l évènement onscroll, seule la souris le fait.

Publicité

gatsu35

Blablaté par Harko

ben tu regardes ma page de test et tu verras que ca marche dans tous les cas, touches de clavier ou souris et mon onscroll fonctionne parfaitement

nargy

Sur ta page c est bizarrre, j ai pas le focus clavier donc les flèches du clavier ne font pas scroller. Dans le test que j ai fait, j utilise le document.onscroll, jai le focus et les flèches du clavier font défiler mais n activent pas le onscroll. j ai Firefox 1.0.1 sous linux.

Opéra lui ne connait apparemment pas onscroll.

gatsu35

Blablaté par Harko

hummmmm
tu as bien mis le focus sur l'élément qui a les scrollers ?

nargy

Pour FF, oui, j ai même essayé de sélectionner du texte pour forcer le focus, mais rien du tout, pas de focus clavier.

nargy

C est que onscroll() n est pas très portable, il me semble. p-e en utilisant un timer. mais ça ne sera pas si fluide.

nargy

Pour FF/Opera il y a une position css qui il me semble fonctionne: fixed, mais qui ne marche pas avec IE. Il faudrait une iframe pour FF/Opera et onscroll pour IE.

gatsu35

Blablaté par Harko

JE précise que je n'ai testé que sous Firefox et IE sous Windows XP
donc bon ce n'est pas forcément la meilleure solution aussi pour avoir un joli tableau delamortkitu facon excel.

J'ai juste fait ça pour l'effet de style

gatsu35

Blablaté par Harko

http://gatsu.ftp.free.fr/html/test_tableau.html
Dernier essai, là j'ai bourriné comme un porc, c'est propre, et tout automatique, et que c'est comme le post précédent

tu as un squelette comme ceci :

Code :

<div id="tableau">
<div class="top">
<table cellspacing="0">
<thead>
<th>type</th>
<th>vaccin</th>
<th>animaux</th>
</thead>
</table>
</div>
<div class="left">
<table cellspacing="0">
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div class="center">
<table cellspacing="0">
<tbody>
<tr>
<td>truc 1</td>
<td>truc 2</td>
<td>truc 3</td>
</tr>
<tr>
<td>truc 1</td>
<td>truc 2</td>
<td>truc 3</td>
</tr>
</tbody>
</table>
</div>
</div>

comme tu peux le constater
ya 3 div dans ce div qui contiennent les class left, top et center
et chaque div contient un tableau à l'interieur.

tu peux bien sûr ommettre tbody et thead.

Sinon pour le javascript tu as juste à initiliser le tableau via
initTableauscroll("iddutabeau" )
et basta tout le reste sera automatique.
redimensionnement des celulles, mise en page....

sinon j'ai toujours un bug de 3px et je n'arrive toujours pas à le résoudre. Donc pour corriger le décalage produit je m'occupe de caller le bloc top avec le bloc center

gatsu35

Blablaté par Harko

Bon appelle moi dieu et analyse bien le code

gatsu35

Blablaté par Harko

Yesssssssss je suis le plus fort
http://gatsu.ftp.free.fr/html/test_tableau.html
Correction effectué avec un ptit coup de baguette de CSS

gatsu35

Blablaté par Harko

Bon d'après un anonyme du nom de FlorentG ma solution est à chier car non accessible, et c'est surtout que je peux très bien splitter le tableau comme bon me semble, donc tu attendras ce soir pour une solution qui déchire sa race ou tu n'auras juste qu'un seul tableau et tout se fera automatiquement ensuite

Message édité par gatsu35 le 16-03-2006 à 09:17:14

jan san kar

profil : pas le bon

Salut,
Je viens de regarder tout ça et maintenant ça me pose un gros problème : il faut que je trouve comment justifier de mettre un truc comme ça dans mon projet car je trouve ça trop cool

gatsu35

Blablaté par Harko

Tu attends 30 seconde la V2 qui fait tout toute seule, tu n'a juste qu'à lui donner un tableau a manger, la largeur et la hauteur et basta
mais j'ai un problème de dimensions de merde sous IE

gatsu35

Blablaté par Harko

heu pas 30 secondes mais une heure si possible merci

gatsu35

Blablaté par Harko

http://gatsu.ftp.free.fr/html/test_tableau.html

Bon aller dernière version, elle fonctionne nickel sous Firefox et IE
vous n'avez juste qu'à lui donner un tableau et elle se debrouille pour le splitter et faire le boulot à votre place.

imaginons un tableau

Code :

<table id="tableau" cellspacing="0">
<thead>
<tr>
<th></th>
<th>type</th>
<th>vaccin</th>
<th>animaux</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>truc 1</td>
<td>truc 2</td>
<td>truc 3</td>
</tr>
<tr>
<td>2</td>
<td>trucfffffffffffffffffffffffff 1</td>
<td>truc 2</td>
<td>truc 3</td>
</tr>
<tr>
<td>3</td>
<td>truc 1</td>
<td>truc 2ssssssssssssssssssssssssssssssssssss</td>
<td>truc 3</td>
</tr>
<tr>
<td>4</td>
<td>truc 1</td>
<td>truc 2</td>
<td>truc 3sssssssssssssssssssssssssssss</td>
</tr>
</tbody>
</table>

et bien vous n'avez juste qu'à faire :

initTableScroll(tableid, largeur, hauteur);

initTableScroll("tableau",300, 200);

automatiquement le tableau sera splitté, les éléments placés ou il faut et dimensionnés au px près. Et les dimensions des cellules des tableaux de gauche et droite seront recalculés.

Attention ce script fonctionne parfaitement avec IE 6 SP2 et firefox 1.x
avec IE5.5 ya un ptit bug d'affichage mais on s'en fout IE5.5 devrait déjà avoir disparu de la surface de la terre.
Sinon laissez tomber pour Opera, cela ne fonctionnera pas du tout puisque l'évènement Onscroll n'est pas implémenté dans la V8.53 ni la V9Beta après plusieurs tests sous v8.53 et recherche sur V9

Donc ce script est à utiliser dans un intranet ou un environnement controlé

xavibla2

Merci beaucoup pour cette fonction qui va vraiment m'aider, c'est exactement ce que je voulais réaliser.

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Toujours voir les entêtes des tables

Sujets relatifs
[mysql] Comment effacer plusieurs tables à la fois ?	[MySQL] Verrous tables MyISAM / InnoDB
PHP/SQL, 2 tables récupérations dans un formulaire	DELETE sur plusieurs tables sous Access?
exporter des tables Access en VBA	Connaitre les tables d'une base
relier deux tables	Exportation tables Mysql > 2Mo
comparaison de tables en vue de faire un historique	[SQL Server] Listes des tables d'une base
Plus de sujets relatifs à : Toujours voir les entêtes des tables

Page générée en 0.114 secondes