Mise à jour des parties date et table de la FAQ JavaScript

Membre averti

Le 27/02/2013 à 17:38

Bonjour à tous et toutes,

Je me permets de réagir sur la mise à jour JS concernant les tables et notamment l'article intitulé :

Comment mettre un scrollbar à gauche sur un tableau ?

En effet, je pense avoir une solution différente qui offre une fonctionnalité en plus : la possibilité d'utiliser la roulette de la souris sur le tableau.

Pour obtenir ce résultat, il suffit d'encadrer le tableau par un div avec les attributs suivants :

Code html :

Sélectionner tout

<div dir="rtl" style="height:100px;overflow-y:scroll;overflow-x: hidden;float:left"><table>...</table></div>

C'est bien entendu l'attribut dir="rtl" qui permet simplement d'inverser la position de la scrollbar (rtl = right to left).

J'ai mis "float:left" de manière à s'adapter à la width du tableau mais on peut le remplacer par une valeur width précise pour obtenir le même résultat. Toutefois, la taille de la scrollbar étant dépendante du système, la solution float semble plus adaptée.

En espérant que cela puisse servir, encore merci pour tout le travail fourni par l'équipe de Developpez.com

2

0

vermine

Expert éminent sénior

Le 06/03/2013 à 10:45

C'est en ligne.

2

0

Le 26/02/2013 à 13:20

j'ai pu noter une erreur

Code :

Sélectionner tout

return Math.ceil((Diff/div));

il y a des parenthese en trop

1

0

Auteur

Expert éminent sénior

Le 03/03/2013 à 22:15

Bonjour,

je me permets de corriger ton code :

Code html :

Sélectionner tout

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
<div dir="rtl" style="height:100px;overflow-y:scroll;"> 
<table border="1" style="width:100%" dir="ltr"> 
<tr> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
</tr> 
<tr> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
</tr> 
<tr> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
</tr> 
<tr> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
</tr> 
<tr> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
</tr> 
<tr> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
<td> bla bla bla bla</td> 
</tr> 
</table> 
</div>

en avec l'attribut dir="rtl" la barre de défilement est certes à gauche mais le texte de la table s'écrit également de droite à gauche (mis en évidence par l'attribut width:100% sur la table). Par conséquent, il faut ajouter dans la balise table l'attribut inverse : dir="ltr". J'ai également supprimé l'attribut float:left et l'overflow-x:hidden également

Merci pour ta suggestion

1

0

sekaijin

Expert éminent

Le 25/02/2013 à 19:08

J'ai une remarque concernant les tables html
la FAQ commence par un exemple de table HTML

Code html :

Sélectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
<table id="idTable"> 
	<tr> 
		<td> Ligne 0 Cellule 0 
		</td> 
		<td> Ligne 0 Cellule 1 
		</td> 
		<td> Ligne 0 Cellule 2 
		</td> 
		<td> Ligne 0 Cellule 3 
		</td> 
	</tr> 
</table>

Or la norme prévoie que le TR doit être placé dans un THAED, TBODY ou TFOOT

les navigateur tel IE vont d'eux même ajouter un TBODY pour corriger ce manque.

ne serait-il pas opportun de présenter directeent un exemple conforme à la norme ??

Code html :

Sélectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table id="idTable"> 
  <tbody> 
	<tr> 
		<td> Ligne 0 Cellule 0 
		</td> 
		<td> Ligne 0 Cellule 1 
		</td> 
		<td> Ligne 0 Cellule 2 
		</td> 
		<td> Ligne 0 Cellule 3 
		</td> 
	</tr> 
  </tbody> 
</table>