Discussion :

[Deciprog]

Bonjour,

J'ai un petit souci avec un tableau qui s'ajuste horizontalement (width:100% et qui utilise une scrollbar (ascenseur) vertical.

L'en-tête où se situe les lignes des colonnes descend en même temps que je baisse l'ascenseur et je voudrais qu'elle reste fixe.

Voici mon code :

Page HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id='tableau_scrollbar'>
	<table class='tableau'>
		<tr>
			<th class='tableau_entete'>Nom</th> //colonne en-tête
		</tr>
		<tr>
			<td>texte</td> //ligne du tableau
		</tr>
	</table>
</div>

CODE CSS :

Code :

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

1
2
3
4
5
6
7
8
 
.tableau{
	width:100%;
}
div#tableau_scrollbar{
	height: 300px;
	overflow:auto;
}

Merci d'avance

[Deallyra]

Bonsoir Dark Snake,

Sans que cela ne résolve ton problème, une petite remarque déjà.

Code css :

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

1
2
3
4
5
6
7
.tableau{
	width:100%;
}
div#tableau_scrollbar{
	height: 300px;
	overflow:auto;
}

Est incorrect.

Pour donner un style à ta div, il faut utiliser ceci :

Code css :

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

1
2
3
4
5
6
7
.tableau{
	width:100%;
}
#tableau_scrollbar{
	height: 300px;
	overflow:auto;
}

Sinon, l'idée qui me vient actuellement serait de faire deux tableaux, le premier contenant simplement les entêtes des colonnes mais je vais voir s'il n'y a pas autre chose (ce qui m'étonnerait quand même un peu ^^ )

[Auteur]

bonjour,

essaye ce script

Sinon je crois qu'un tel script a été proposé dans la FAQ ou dans les codes sources, mais je suis incapable d'y remettre la main dessus

[Deallyra]

Auteur, le script reprend ce que j'ai proposé non?

Par contre, l'exemple concret proposé sur le post a été hébergé sur un espace n'appartenant pas à développez et la source a été supprimée

[Auteur]

Auteur, le script reprend ce que j'ai proposé non?

oui. Mais j'ai été un peu long à rédiger mon message. Je n'ai donc vu ton message qu'après avoir posté le mien

Par contre, l'exemple concret proposé sur le post a été hébergé sur un espace n'appartenant pas à développez et la source a été supprimée

oui, dans le message n°9 le lien est mort mais je faisais allusion au code contenu dans le message Bien sûr il faudra le mettre un peu à jour (ajouter un doctype, et corriger des petites erreurs )

[Bisûnûrs]

Par contre, l'exemple concret proposé sur le post a été hébergé sur un espace n'appartenant pas à développez et la source a été supprimée

Sinon, on peut regarder le lien du premier message qui fonctionne toujours.

Au passage, mettre div#idelement fonctionne aussi.

[Deallyra]

Au passage, mettre div#idelement fonctionne aussi.

Je teste ça dès demain.

Pareil si on fait

class.nomClasse ?

[Bisûnûrs]

class.nomClass ?

Je dirais plutôt div.nomClasse, oui.

[Deallyra]

U_u

Autant pour moi, c'est juste la spécification du conteneur c'est ca? :/

Bon bref, j'arrête les dégâts ^^'

[Bovino]

Code :

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

div#nom_id

S'applique à l'élément div ayant l'id nom_id.

Code :

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

div #nom_id

S'applique à l'élément ayant l'id nom_id contenu dans une div.

[Deciprog]

Merci pour votre aide Deallyra et Bisûnûrs mais mon tableau à une largeur automatique (position : relative et width:100%), le script du 2ème message est un tableau fixe.
Sinon je ne veux pas utiliser le javascript .
Le problème avec mon code c'est que si je crée un tableau pour l'en-tête puis un pour le contenu, les colonnes ne seront pas alignées car les colonnes se redimensionnent suivant le contenu.
Je voudrais donc spécifier dans mes balises (<th>) d'en-tête du tableau quelque chose comme "fixe".

Merci pour votre aide

[s.n.a.f.u]

Bonjour,

Sans javascript, je pense qu'il faut s'emboîter :

Code :

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
 
<style>
#entete {
    font-weight: bold;
    text-align: center;
    margin: 0; padding: 0;
}
#wrapTable{
	height: 300px;
	overflow:auto;
}
#tableau{
	width:100%;
}
</style>
 
<div id='main'>
	<p id='entete'>Nom</p> 
    <div id="wrapTable">
        <table id='tableau'>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
            <tr>		<td>texte</td> 		</tr>
        </table>
    </div>
</div>

[Deallyra]

Hum... Je pense avoir trouvé une bonne solution...

Je peux posté ou au vu de mes bêtises antérieures je me tais?

Non... De toutes façons je vais m'exprimer, trop contente d'avoir trouvé ^^

la solution réside dans le z-index \^o^/

Pour faire clair et simple.


Ton tableau doit être alimenté par une requête, donc un langage serveur.

Avec ce langage serveur, créé toi un tableau.
Dans ce tableau, mets le résultat de ta requête.

Ensuite, en HTML, crées toi dynamiquement le premier tableau, normalement. Le tableau que tu as en ce moment en fait ^^

Ensuite, tu te crées un second tableau HTML, en z-index supérieur, avec un padding-top égal à la hauteur d'une ligne.

Ceci, pour arriver au niveau de la seconde ligne, là où on commence à lire les enregistrements.

Ensuite, simple, tu affiches les résultats de ton tableau fait en langage serveur.


Ca fait bidouillage. Mais que celui qui me trouve en langage css un équivalent qui fonctionne bien et mieux, que celui ci me jette la première pierre
(mais pas trop fort )

[s.n.a.f.u]

Ben je trouvais ma solution plus simple, sauf si la classe de la div englobante ( "main" dans mon code) ne peut être changé.
En tous les cas, bravo pour avoir trouvé une solution et pour la démonstration claire qui va avec.

[Deallyra]

@jml94

faut pas leur répéter mais en fait je n'ai pas comprit ta solution

[s.n.a.f.u]

@jml94

faut pas leur répéter mais en fait je n'ai pas comprit ta solution

Disons que je prends une grande boite.
A l'intérieur, je lui mets un titre en haut et une boite plus petite qui a un ascenseur et une table.

SHAZAM !

Et puisqu'on en est aux confessions, j'ai pas tout compris ta solution !

[Deallyra]

Hum... Ce que je n'ai pas comprit de ta solution, c'est comment il gérait la taille des colonnes de la petite boite fixe en haut

[s.n.a.f.u]

C'est quoi la petite boite en haut ? Le titre ou carrément la boite principale ?
S'il s'agit du titre, dans mon exemple, c'est juste un paragraphe, donc pas de tailles de colonnes à gérer, mais cela pourrait devenir problématique s'il devait y avoir plusieurs colonnes à gérer. Mais ça doit bien se faire avec css je pense.

Genre, à main levée :

Code :

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
 
<style>
#entete {
    font-weight: bold;
    text-align: center;
    margin: 0; padding: 0;
}
#wrapTable{
	height: 300px;
	overflow:auto;
}
#tableau{
	width:100%;
}
#main col1 { width: 33%; }
#main col2 { width: 20%; }
#main col3 { width: 46%; }
</style>
 
<div id='main'>
	<table id="header"><tr><th class="col1">Header1</th><th class="col2">header2></th><th class="col3">header3></th></tr></table>
    <div id="wrapTable">
        <table id='tableau'>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
            <tr><td class="col1">texte1</td><td class="col2">texte2</td><td class="col3">texte3</td></tr>
        </table>
    </div>
</div>

[Deallyra]

Oui ^^

Mais non

En fait, les colonnes de titres sont de tailles variables, fonctions de la plus grande propriété d'un attribut d'un enregistrement.

Je ne sais pas si je suis claire

La petite boite était le titre effectivement, j'aurais du me relire >.<

[s.n.a.f.u]

Oui ^^

Mais non

En fait, les colonnes de titres sont de tailles variables, fonctions de la plus grande propriété d'un attribut d'un enregistrement.

Effectivement, si on veut garder ce comportement, ça risque d'être chaud. Et surtout pour des solutions comme la mienne ou la tienne où il y a deux tables, donc des largeurs de colonnes indépendantes.
S'il existe une technique en css ou html, je suis preneur !