faire défiler des colonnes d'un tableau

**lelectronique.com** · 15/11/2009, 19h17

Bonsoir,
voilà j'ai un tableau qui fait x colonne celon la sélection du visiteur du site afin de ne pas pertuber la mise en pae je voudrais ajouter un scrollbar en bas du tableau me permettant de le faire défiler en largeur tout en laissant la colonne de gauche toujours visible car il s'agit de la colonne "légende" du tableau
est ce possible ou non ? sinon comment puis je faire
merci d'avance pour votre aide

**kernelfailure** · 15/11/2009, 19h56

En gérant avec un faux défilement à l'aide de display=none ou alors un iframe.

**le_chomeur** · 15/11/2009, 21h33

... kernelfailure essayes au moins de chercher une réponse cohérente avant de répondre merci !

il te faut utiliser soit 2 tableau imbriqués avec une cellule en taille fixée + la propriété overflow:auto

**lelectronique.com** · 15/11/2009, 22h23

merci le_chomeur pour ta reponse, par contre si je fais cela mes lignes ne risque plus d'etre aligné avec ma colonne de gauche non ? je vais tester cela demain

**le_chomeur** · 15/11/2009, 23h00

il te faut fixer la hauteur de chacune des cellules

(ou tr)

**kernelfailure** · 16/11/2009, 01h16

En quoi c'est pas cohérent ?

Premier cas, on dispose d'un tableau pour faire court : 2 lignes, 6 colonnes.
On en affiche que 3.

tr=ligne
th=entête
td=données

Code :

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

1
2
3
4
 
table
tr1 th1 td11 td12 td13 td14 td15 td16
tr2 th2 td21 td22 td23 td24 td25 td26

Les tdx1-tdx3 ont style="". les tdx4-tdx6 sont à display='none'
On ajoute ce que bon nous semble pour proposer un défilement droite-gauche (boutons, '<' '>', etc...).
Imaginons un défilement vers la droite, cela donne :
Les tdx1 passent à display='none'; tx2-tdx' ont style="". les tdx5-tdx6 sont à display='none'.
Gestion de la position obligatoire.

Second cas, on encapsule le tableau de données dans un iframe, défilement horizontal, et on place les entêtes dans un autre tableau à gauche. Ici aussi ça fonctionne, mais il faudra veiller à fixer les hauteurs.

EDIT
Cadeau :
Un petit code vite fait pour montrer que c'est loin d'être incohérent. C'est du code bourrin, mais le principe est là.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<html>
<head><title>SCROLL ME</title></head>
<body>
<table>
<table id="SCROLLID">
<tr><th>T1</th><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
<tr><th>T2</th><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
</table>
<input type="button" value="<<" onclick='SCROLL.first()' id='SCROLLFIRST'>
<input type="button" value="<" onclick='SCROLL.left()' id='SCROLLLEFT'>
<input type="button" value=">" onclick='SCROLL.right()' id='SCROLLRIGHT'>
<input type="button" value=">>" onclick='SCROLL.last()' id='SCROLLLAST'>
<script>
var SCROLL = {
	i:0,
	n:8,	// Total des colonnes
	v:4,	// Nombre de colonne visible
 
	first:function(){
		if(this.i == 0) { return; }
		this.i=0;
		this.display();
		},
 
	right:function(){
		if((this.i + this.v) >= this.n) { return; }
		this.i++;
		this.display();
		},
 
	left:function(){
		if(this.i == 0) { return; }
		this.i--;
		this.display();
		},
 
	last:function(){
		if(this.i == (this.n - this.v)) { return; }
		this.i=this.n - this.v;
		this.display();
		},
 
	display:function(){
		var scr = document.getElementById('SCROLLID');
		scr.style.border='1px black solid'; // A virer
		var trs = scr.getElementsByTagName('tr');
		for (var i=0, n=trs.length; i<n; i++) {
			var tds = trs[i].getElementsByTagName('td');
			for (var j=0, m=tds.length; j<m; j++) {
				tds[j].style.display='';
				if(j<this.i) tds[j].style.display='none';
				if(j>=(this.i+this.v)) tds[j].style.display='none';
			}
		}
		var scr0 = document.getElementById('SCROLLFIRST');
		var scrl = document.getElementById('SCROLLLEFT');
		var scrr = document.getElementById('SCROLLRIGHT');
		var scr9 = document.getElementById('SCROLLLAST');
		scr0.style.visibility ='visible';
		scrl.style.visibility ='visible';
		scrr.style.visibility ='visible';
		scr9.style.visibility ='visible';
		if(this.i == 0) { scrl.style.visibility='hidden'; scr0.style.visibility='hidden'  }
		if((this.i + this.v) >= this.n) { scrr.style.visibility ='hidden'; scr9.style.visibility ='hidden' }
		}
};
SCROLL.display();
</script>
</body>
</html>

faire défiler des colonnes d'un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager