Bonjour,

Je suis à la recherche de solutions pour créer un tableau qui possède une scroll bar horizontale et une scroll bar vertical.

En vrai c'est plus compliqué que ça. Car il ne faut pas que la première ligne du tableau bouge quand nous touchons à la scroll bar vertical et il ne faut pas que la première colonne bouge quand nous touchons à la scroll bar horizontale.

Les données à mettre dans le tableau sont assez conséquantes, c'est pour cela que je souhaite couper le tableau et mettre des scroll bar au tableau et non à la page web accueillant ce tableau

Quelqu'un aurait une solution à proposé?

-
Edité par Crazy_turtle 26 juin 2015 à 16:50:22

Salut, 

As-tu des ébauches de code à nous montrer ? 

Sinon tu peux essayer de mettre des tailles fixes au colonnes/lignes de ton table, et ajouter la propriété CSS :

overflow:auto;

 Après je ne visualise pas forcément bien ce que tu veux, peut-être qu'avec un schéma ça serait plus simple ? 

J'ai une solution, mais je ne trouve pas ça très propre, car ça nécessiterai de faire 3 tableaux pour au final en faire qu'un seul et ce n'est pas exactement ce que je voudrais faire.

Je suis entrain de faire des test avec cette propriété.

Nous avons des alignements de séquence qui sont bien trop long pour tenir sur une page. Je voudrais que nous puissons scroller sur ces alignements de séquence. Mais comme je l'ai dis je voudrais garder la première colonne du tableau lorsque je scroll vers la droite et garder la première ligne du tableau (l'entête ) lorsque je scroll vers le bas.

Et je voudrais que lorsque je scroll vers la droite l'entête du tableau affiche le reste de la séquence qui est caché et lorsque je scroll vers le bas la que le reste de la première colonne s'affiche.

Est-ce plus clair?

-
Edité par Crazy_turtle 28 juin 2015 à 1:19:44

Bonsoir,

C'est juste pas possible avec un tableau sous forme <table>

Tu pourrais cependant avec des div en display:table et des cellules en display:table-cell nommer toutes tes premières cellules de ta première colonne avec la même class comme ceci :

.col1 {
    display:table-cell;
}

et ensuite avec du jQuery et la fonction ScrollTo, tu fixes ta première colonne et la mettant en overflow:hidden et left:0. Peut-être un z-index pour être sur (à tester) que les autres colonnes passent bien dessous.

tu garderas ainsi ta première colonne de gauche toujours sur le site et en scrollant vers la droite, tu afficheras toujours ainsi ta première colonne.

C'est le même principe que pour les menu qui se fixe en haut quand on scroll si tu préfères

Après tu peux très bien faire deux tableaux un en position fixed et l'autre en normal avec un margin-left de la taille du premier tableau qui représentera ta première colonne et même principe avec overflow:hidden à ta guise

Voici un exemple avec 2 tableaux :

JSFIDDLE

-
Edité par stefde3 27 juin 2015 à 1:17:10

par contre tu ferais mieux de retirer ton lien car si je ne me trompe pas, il s'agit de formules de composition de médicaments de laboratoires pharmaceutiques...

Se serait très bête qu'ils te fassent un procès pour divulgations d'informations industrielles aussi importantes

pour le vertical, tu mets : 

.left {
    max-height:100%;
    overflow:hidden;
    overflow-y:auto
}

et tu pourras scroller la première et idem si si tu aussi scroller la deuxième

Mais attention car si tu veux scroller la deuxième colonne en plus de la première, elle seront plus synchronisées. mieux vaut laisser le scroll verticale de base sur la fenêtre plutôt que de jouer avec les scrolls verticales ici.

Mais avec display table et display table-cell ça aurait été plus efficace. Je ne sais même pas si c'est faisablesur table des scroll auto

-
Edité par stefde3 29 juin 2015 à 12:29:10

Bon je ne trouve pas de solution comme ça, je vais essayer avec du javascript, malheureusement je ne suis pas famillier avec ce langage, donc je vais demander dans la rubrique Js.

Merci pour ton aide stefde3

bah entre <table> et display:table, 

y a une grande différence car la balise <table> bloque certaines fonctions qu'un tableau en css ne bloquera pas

Comme les overflow-y par exemple car en effet ça ne fonctionne pas pour <table> ni pour <tbody>

-
Edité par stefde3 30 juin 2015 à 10:53:52

D'accord, je vais regarder cela.

Alors j'essaye avec les tableau en CSS, mais je ne suis absolument pas famillier, et là ça ne donne vraiment pas ce que je veux.

html :

<body>
		<div id="tabTop">
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
		</div>	
		<div id="tabGauche">
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
			<span>premier element</span>
			<span>Deuxieme element</span>
			<span>Troisieme element</span>
			<span>Quatrieme element</span>
		</div>
	
		

	</body>

#tabTop, #tabGauche {
    display : table;
    overflow : auto;
}
#span{
    
    display : table-cell;
}

#tabGauche span{
    
    display : block
}

-
Edité par Crazy_turtle 30 juin 2015 à 11:15:17

je te ferais une autre maquette tout à l'heure là j'ai encore deux trois trucs à terminer

de rien la tortue folle 

ou alors es-tu la tortue ? (le chanteur ^^)

Nan nan!! xD

J'ai rien trouvé comme nom à me mettre donc c'est le premier qui m'es venu.

oki doki ^^ 

bon j'attaque ta maquette

bon en fait ça me saoule ton truc

je comprends pas ce que ça va t'apporter de scroller verticalement et horizontalement. tu vas te planter de ligne dans ton tableau

en plus j'imagine que tu veux garder les titre des colonnes en plus en place et que seules les contenus soient scrollables ?

ça va être compliqué ton truc car si on scrolle verticalement, la colonne de gauche et la colonne de droite (séparément) tu t'y retrouveras jamais dans tes lignes.

-
Edité par stefde3 30 juin 2015 à 12:50:58

Pcq il y a trop de données pour tous les mettre sur une page. Pour comparé deux alignements de sèquences il est nécessaire de voir la première ligne qui est l'alignement de sèquence inchangé. Puis la première colonne sert à dire quelle proteine contient cet alignement.

Bon du coup je ne pense pas cela possible en HTML/CSS, je vais me basé sur d'autre langages.

Merci de ton aide tout de même stef.

-
Edité par Crazy_turtle 30 juin 2015 à 13:47:13

en fait tu veux un truc dans ce genre :

mais si tu la rend scrollable tu auras plus de coincidence entre le colonne de gauche et( la colonne de droite 

pour ça que je pige pas quel en est l'intérêt

exemple :

Si je scroll la colonne de gauche mais pas la droite, les lignes correspondent plus

En gros la première colonne doit être seulement scrollable à la vertical ( pour garder les relations avec les autres lignes) et la première ligne doit être seulement scrollable à l'horizontal ( pour garder les relations avec les autres colonne.

En faite ton schéma est exactement ce que je veux, je n'avais pas regarder attentivement

-
Edité par Crazy_turtle 30 juin 2015 à 14:47:13

oui donc comme j'ai fait

en fait ton scroll vertical doit inclure et la colonne gauche et la colonne droite pour garder l'alignement

seule ta colonne de droite doit scroller horizontalement et passe derrière la colonne de gauche

et quand on scroll verticalement, on garde les titre aussi en position absolue ou t'as pas besoin de titre de colonne ?

-
Edité par stefde3 30 juin 2015 à 14:47:59

C'est tout à fait ça pour le scroll horizontal

En faite j'ai que 2 colonnes, une premières où je met les noms des protéines et la 2eme ou je met les alignement de sequences d'acide aminé de ces proteines

Donc en entête j'ai la protéine qu'on peut qualifier de "principale" et j'ai donc besoin de garder ce que tu qualifie de titre de colonne

-
Edité par Crazy_turtle 30 juin 2015 à 14:51:30