Première colonne tableau position:fixed sur firefox

**dragonfly** · 05/03/2015, 16h36

Bonjour à tous,

J'ai un tableau flexigrid dont je voudrais mettre la première colonne en position:fixed, cela fonctionne trés bien sous IE11, chrome et firefox :

Code :

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

1
2
3
4
table#flex1 td:first-child, .flexigrid div.hDiv table th:first-child {
	position: fixed;
	z-index: 2;
}

Le probléme vient ensuite, en effet, sans retouche, la deuxième colonne se met sous la première colonne, j'ai donc fait ceci :

Code :

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

1
2
3
4
table#flex1 td + td, .flexigrid div.hDiv table th + th {
	position: relative;
	left:87px;
}

Cela fonctionne très bien sous IE11 et chrome (a savoir a partir de la deuxième colonne, elles sont décalé de 87px pour ne pas chevaucher la première colonne en fixed), mais sous Firefox, j'ai l'impression qu'il ne prend tout simplement pas en compte ces paramètres (la syntaxe td + td est correcte puisque dans la débuggeur, je la retrouve en cliquant sur un td de la deuxième colonne).

Quelqu'un sait-il comment faire pour corriger ce probléme sous Firefox ?

Par avance, meci.
Dragonfly

**NoSmoking** · 05/03/2015, 22h03

Bonjour,
un minimum de code HTML serait le bienvenue pour y voir plus clair et tester.

**dragonfly** · 06/03/2015, 12h04

Bonjour et merci pour ton retour,

voici un exemple de code énonçant parfaitement mon problème (le code que je génére vient d'un flexigrid et ca serait une horreur à mettre)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#divConteneur{
	min-width:300px;
	width:300px;
	overflow:auto;
}
table#flex1 td:first-child{
	position: fixed;
	z-index: 2;
	background-color:#FFFFFF;
}
table#flex1 td + td{
	position: relative;
	left:87px;
}

Code html :

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
<div id="divConteneur">
	<table id="flex1" width="300px">
	   <tbody>
		 <tr class="row">
		   <td align="left"><div style="text-align: left; width: 80px;">Nb litres</div></td>
		   <td align="center" abbr="Mar 2014" class="sorted"><div style="text-align: center; width: 54px;">1</div></td>
		   <td align="center" abbr="Avr 2014"><div style="text-align: center; width: 54px;">2</div></td>
		   <td align="center" abbr="Mai 2014"><div style="text-align: center; width: 54px;">3</div></td>
		   <td align="center" abbr="Juin 2014"><div style="text-align: center; width: 54px;">4</div></td>
		   <td align="center" abbr="Juil 2014"><div style="text-align: center; width: 54px;">5</div></td>
		   <td align="center" abbr="Aou 2014"><div style="text-align: center; width: 54px;">6</div></td>
		 </tr>
		 <tr class="erow trSelected">
		   <td align="left" class=""><div style="text-align: left; width: 80px;">Coût total</div></td>
		   <td align="center" abbr="Mar 2014" class="sorted"><div style="text-align: center; width: 54px;">1</div></td>
		   <td align="center" abbr="Avr 2014"><div style="text-align: center; width: 54px;">2</div></td>
		   <td align="center" abbr="Mai 2014"><div style="text-align: center; width: 54px;">3</div></td>
		   <td align="center" abbr="Juin 2014"><div style="text-align: center; width: 54px;">4</div></td>
		   <td align="center" abbr="Juil 2014"><div style="text-align: center; width: 54px;">5</div></td>
		   <td align="center" abbr="Aou 2014" class=""><div style="text-align: center; width: 54px;">6</div></td>
		</tr>
		</tbody>
	</table>
</div>

Sous IE et Chrome, la valeur "1" s'affiche, et au scroll, la valeur passe sous la colonne fixed.
Sous Firefox, la valeur "1" est sous la colonne fixed (et n'est donc jamais visible), la classe "table#flex1 td + td" n'est pas prise en compte.

Si vous avez des idées.
Cordialement

**dragonfly** · 06/03/2015, 17h41

Finalement, j'ai reussi a le faire fonctionner en rajoutant quelques bout de CSS :

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

<html>
<head>
	<style>
		#divConteneur{
			min-width:300px;
			width:300px;
			overflow:auto;
		}
		table#flex1 td:first-child{
			position: fixed;
			z-index: 2;
			background-color:#FFFFFF;
		}

		table#flex1 td + td{
			position: relative;
			left:87px;
			display:inline-table;
		}
		
		table#flex1{
		   width:800px;
		}
	</style>
</head>
	<body>
		<div id="divConteneur">
			<table id="flex1" width="300px">
			   <tbody>
				 <tr class="row">
				   <td align="left"><div style="text-align: left; width: 80px;">Nb litres</div></td>
				   <td align="center" abbr="Mar 2014" class="sorted"><div style="text-align: center; width: 54px;">1</div></td>
				   <td align="center" abbr="Avr 2014"><div style="text-align: center; width: 54px;">2</div></td>
				   <td align="center" abbr="Mai 2014"><div style="text-align: center; width: 54px;">3</div></td>
				   <td align="center" abbr="Juin 2014"><div style="text-align: center; width: 54px;">4</div></td>
				   <td align="center" abbr="Juil 2014"><div style="text-align: center; width: 54px;">5</div></td>
				   <td align="center" abbr="Aou 2014"><div style="text-align: center; width: 54px;">6</div></td>
				 </tr>
				 <tr class="erow trSelected">
				   <td align="left" class=""><div style="text-align: left; width: 80px;">Coût total</div></td>
				   <td align="center" abbr="Mar 2014" class="sorted"><div style="text-align: center; width: 54px;">1</div></td>
				   <td align="center" abbr="Avr 2014"><div style="text-align: center; width: 54px;">2</div></td>
				   <td align="center" abbr="Mai 2014"><div style="text-align: center; width: 54px;">3</div></td>
				   <td align="center" abbr="Juin 2014"><div style="text-align: center; width: 54px;">4</div></td>
				   <td align="center" abbr="Juil 2014"><div style="text-align: center; width: 54px;">5</div></td>
				   <td align="center" abbr="Aou 2014" class=""><div style="text-align: center; width: 54px;">6</div></td>
				</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

Par contre j'ai conditionné ces modifications seulement à Firefox (c'est le seul qui ne fonctionnait pas et j'ai pas envie de voir surgir des effets indésirables sur les autres navigateurs avec un code comme suit :

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
 
 
	// Défini la taille du tableau flexigrid (pour régler le probléme de la colonne fixed sous Firefox)
	var userAgent = navigator.userAgent.toLowerCase();
	var browser = {
			   version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[/: ]([d.]+)/ ) || [])[1],
			   chrome: /chrome/.test( userAgent ),
			   safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
			   opera: /opera/.test( userAgent ),
			   msie: (/msie/.test( userAgent ) && !/opera/.test( userAgent )) || (/trident/.test( userAgent )),
			   mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) && !/trident/.test( userAgent )
			};
	var tailleTot = (66*period)+87;
	if( browser.mozilla){
		$("head").append("<style> table#flex1 td + td, #Principale .flexigrid div.hDiv table th + th {display:inline-table;} </style>");	
		$("head").append("<style> #flex1, #Principale .flexigrid div.hDiv table {width:"+tailleTot+"px; !important} </style>");
	}

Voila, si ca peux aider quelqu'un

P.S : Le code en haut est un exmple et en bas un extrait de mon vrai code

Bon week-end

**NoSmoking** · 07/03/2015, 14h50

Voila, si ca peux aider quelqu'un

j'ai qu'en même l'impression qu'il y a plus propre, déjà en virant le CSS inline.

Je n'ai pas franchement vu de différence entre les différents navigateurs, le rendu est approximatif.

Pourquoi ne pas avoir simplement séparé ta colonne gauche du reste de ta table ?

**dragonfly** · 09/03/2015, 10h13

Bonjour,

si j'enléve le CSS inline, sous Firefox, la colonne avec la valeur "1" n'apparait pas, elle se cache sous la première colonne.
Je ne trouve pas que le résultat est approximatif, bien au contraire (avec quelques lignes de CSS, sans avoir à dessoser la structure du tableau), peut être qu'avec l'exemple, ca semble approximatif, mais intégré dans mon projet, le rendu est le même sur tout les navigateurs (IE8-11 Firefox, chrome) et très propre

De plus, je ne peux pas séparer la première colonne du tableau car la génération de celui-ci est faite via un flexigrid jquery donc il se génére automatiquement.

Cdlt,

Première colonne tableau position:fixed sur firefox

Tableau en CSS

Discussions similaires

Partager

Partager