Discussion :

[Thury14]

Bonjour,
Mon application marche très bien sur navigateur standard, mais je découvre les joies des navigateurs mobiles…

Le principe : un tableau dont la première colonne est figée, et c'est ça mon vrai problème. Le reste peut être rempli avec des valeurs numériques.

Il me suffirait que ça marche sur un seul navigateur mobile android.
- Opera mini est éliminé parce qu'il me propose le clavier texte, et il refuse fermement de faire défiler le tableau.
- Firefox: quand je rentre une valeur, la colonne figée va se promener je ne sais pas où.
- Reste le navigateur standard d'android, qui me propose bien le clavier numérique et qui fait bien défiler le tableau, mais TOUT le tableau, même la première colonne. C'est pareil sous dolphin.

Comment faire que cette colonne soit figée aussi dans les affichages mobiles?

Voici mon code css, beaucoup de copié-collé…:

Code css :

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
/* ………… Je n'ai pas copié le début, valable seulement pour les affichages standards */
 
@media (max-width: 640px) {
    * {
        box-sizing: border-box;
    }
 
/*Ici je n'ai pas copié la partie concernant le menu*/
 
/* Le conteneur de la table, pour les ascenseurs */ 
		#divtable{
			position:relative;
			margin-left: auto;
			margin-right: auto;
			/*min-height:260px;
			height:260px;/*pour IE qui comprend rien, et qui ne reconnait pas min-height,
			mais qui comprend mal height*/
			min-width:200px;
			width:90%;/*pour IE qui comprend rien*/
			overflow-x:scroll;/*pour activer les scrollbarres*/
			-webkit-overflow-scrolling: touch; /* optional momentum scrolling */
			color:black;
			}
 
 
 
	/* La table */	
		table.style1 {
			border-width:1px; 
		 	border-style:solid; 
			border-color:black;
			border-collapse:collapse;
			padding:0;
			}
 
		td, th {
			border-collapse:collapse;
			border: 1px solid black;
			padding:0;
			}
 
	/* Figer les deux premières colonnes */
		.col_2{
			 position:absolute;
			 z-index:3;
			 margin-left:-2px;
			 height:20px;
			 border-collapse:collapse;
			 border: 1px solid black;
			 width: 120px;
			}
		/* Libérer à partir de la col3 */
		.col_3{
			margin-left:125px;
			border-style: hidden;
			padding-left:120px;
			}
}

Merci pour vos indications. J'aimerais ne pas faire une version spéciale mobiles…

[Thury14]

Il semble que ce soit le
@media (max-width: 640px) {…
qui ne marche pas bien, parce que certains réglages n'étaient pas pris en compte.

Du coup j'ai utilisé mobile detect qui renvoie sur un css ou l'autre.
Les ascenseurs marchent seulement sous Chrome.
Firefox la position absolute est respectée d'une manière très bizarre, inexploitable. Opera: pas d'ascenseurs. Et le navigateur android ne respecte pas du tout la position absolute. Idem Dolphin.

[Invité]

Bonjour,

1/ un code CSS n'a d'intérêt qu'AVEC le code HTML associé.
Là, on ne peut rien tester, donc pas te répondre.

2/ Une page en ligne serait un +.

3/ Avant d'incriminer les navigateurs, il faudrait déjà vérifier la validité / compatibilité de ton code

[Thury14]

Merci de vous intéresser à mon cas… et je reçois volontiers tous les reproches : je suis un béotien.
Mais n'ai-je pas un peu raison par rapport aux navigateurs mobiles? Il y en a pas deux qui me donnent le même résultat. Je ne dis pas que ce soit un mal: c'est sans doute le problème de ces programmes volontairement allégés, mais ça ne facilite pas le développement pour un autodidacte.

Je ne peux mettre un lien vers le site parce que c'est une application avec une base de donnée, que je n'ai qu'une seule base et qu'en plus il n'y a aucune sécurité. Si je mets un lien, n'importe quel rigolo peut venir faire vraiment n'importe quoi.

Quant au fichier html, c'est sûr, je suis pas très malin… C'est par honte que j'ai rien mis parce que j'avais peur de me faire insulter . C'est un fichier très compliqué avec beaucoup de php, sûrement très très sale aux yeux d'un puriste, et je craignais de me faire reprendre à chaque ligne . J'ai préféré ne rien dire. De toute manière ça ne marcherait pas sans tout ce qu'il y a derrière.

Du coup j'ai fait un fichier avec le strict minimum pour comprendre la situation et sans php.
Voici:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<meta charset="UTF-8" name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1.4, shrink-to-fit=no">
 
<head>
  	<link rel="stylesheet" type="text/css" 
  	href="style/style_affichage.css?v=<?= filemtime('style/style_affichage.css'); ?>"/>
 	<script type='text/JavaScript' src="13_javascript.js?v=<?= filemtime('13_javascript.js'); ?>"></script> 	
  	<title></title>
</head>
 
<html><body>	
 
<!-- C'est ici le tableau dont la colonne 1 (class col_2) devrait être figée -->
<form name="general" method="post" action="1_saisie_note.php">
<div id="divtable">
	<table class="style1" cellpadding="5" >
		<tr bgcolor="#5495E9">
			<td bgcolor="#5495E9" class="col_2">Nom</td>
			<td class="col_3"></td>
			<td>Valeur 1</td>
			<td>Valeur 2</td>
			<td>Valeur 3</td>
		</tr>
		<tr bgcolor="#84D7EC"> 
			<td bgcolor="#84D7EC" class="col_2">Michel</td>
			<td class="col_3"></td>
			<td><input></td>
			<td><input></td>
			<td><input></td>
		</tr>
		<tr bgcolor="#84D7EC"> 
		<td bgcolor="#84D7EC" class="col_2">Louis</td>
		<td class="col_3"></td>
		<td><input></td>
		<td><input></td>
		<td><input></td>
		</tr>
	</table>
</div>
</form>
 
</body></html>