affichage de tableau

bonjour,

j'ai le tableau suivant :

Code:

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
				<table>
					<thead>
 
						<tr>
							<th colspan="4">VLAN</th>
							<th colspan="6">Port</th>
							<th></th>
						</tr>
 
						<tr>
							<th>N°</th>
							<th>Enable</th>
							<th>ID</th>
							<th>PRI</th>
							<th>1</th>
							<th>2</th>
							<th>3</th>
							<th>4</th>
							<th>Uplink</th>
							<th>Manager</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td rowspan="2">
								<select id="NUMBER" onchange="MAJListBox(this.value)";>
									<option value="00">00</option>
									<option value="01">01</option>
									<option value="02">02</option>
									<option value="03">03</option>
									<option value="04">04</option>
									<option value="05">05</option>
									<option value="06">06</option>
									<option value="07">07</option>
									<option value="08">08</option>
									<option value="09">09</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
									<option value="13">13</option>
									<option value="14">14</option>
									<option value="15">15</option>
								</select>
							</td>
 
							<td rowspan="2"><input type="checkbox" id="ENABLE" /></td>
							<td rowspan="2">
								<input type="text" class="ClassVID" id="VID" onkeyup="CtrlVID(this);" onmouseup="CtrlVID(this);"/>
							</td>
							<td rowspan="2">
								<p>
									<select id="PRI" >
										<option value="0">0</option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
										<option value="6">6</option>
										<option value="7">7</option>
									</select>
								</p>
							</td>
							<td><input type="checkbox" id="MEMBER0" /></td>
							<td><input type="checkbox" id="MEMBER1" /></td>
							<td><input type="checkbox" id="MEMBER2" /></td>
							<td><input type="checkbox" id="MEMBER3" /></td>
							<td><input type="checkbox" id="MEMBER4" /></td>
							<td><input type="checkbox" id="MEMBER5" /></td>
							<td>Member</td>
						</tr>
 
						<tr>
							<td><input type="checkbox" id="TAGGED0" /></td>
							<td><input type="checkbox" id="TAGGED1" /></td>
							<td><input type="checkbox" id="TAGGED2" /></td>
							<td><input type="checkbox" id="TAGGED3" /></td>
							<td><input type="checkbox" id="TAGGED4" /></td>
							<td><input type="checkbox" id="TAGGED5" /></td>
							<td>Tagged Output</td>
						</tr>
					</tbody>
				</table>

le css est :

Code:

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
body
{
	margin: 0;
	padding: 5px;
}
 
form
{
	margin: 0;
	padding: 0;
}
 
table
{
	margin: 10px auto;
	padding: 0;
	font-size: 0.9em;
	border-collapse: collapse;
	border: 2px solid black;
	color: black;
}
 
th
{
	font-weight: bold;
	background-color: black;
	color: white;
	font-weight: bold;
}
 
th, td
{
	border: 1px solid black;
	text-align: center;
	padding: 0.2em 1em;
	margin: 0;
}
 
.retour
{
	clear: both;
}
 
.ClassVID
{
	width: 3em;
	text-align: center;
}
 
.RowsEnb td
{
	color: rgb(160,160,160);
	background-color: rgb(245,245,245);
}

je mets à jour le tableau de cette façon :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function MAJListBox(valeur)
{
	var VLAN = JSONvariable.VLAN[parseInt(valeur)];
 
	getId('ENABLE').checked = VLAN.Enb;
	getId('PRI').value = VLAN.PRI;
	getId('VID').value = parseInt(VLAN.ID, 16);
 
	for(var i = 0 ; i<6 ; i++){
		getId('MEMBER' + i).checked = (VLAN.Member[i] * 1);
		getId('TAGGED' + i).checked = (VLAN.Tagged[i] * 1);
	};	
}
 
function getId(Nom){
	return document.getElementById(Nom);
};

=> le problème est que sous firefox (pas sous IE), les bordures du tableau n'apparaissent pas correctement (certaines zones ne sont pas dessinées)

j'ai d'autres infos...

avant de charger ma page, je desactive le js puis je charge la page
=> le tableau n'apparait pas correctement

après je fais enregistrer sous... puis j'ouvre cette page => le tableau aparait correctement

il semblerait donc qu'il y ai peut etre des problèmes sur certains caractères (voir qu'il y ai peut etre meme des caractères invisibles).
Remarque : Je vais chercher la page web sur un petiti serveur controllé par un µControlleur : je ne suis donc pas sure que le formatage du texte soit bon...
=> comment faire pour vérifier s'il n'y a pas de problemes à ce niveau ?

autre remarque : après avoir fait enregistré sous, lorsque je visualise le code source de la page, il y des caratères "/" qui ont sautés

heu un th dasn un tr ?

la structure normale est
Code:

1 2 3 4 5 6 <table> <tr> <td>contenu cellule</td> </tr> </table>
remplace th par td et à mon avis ça ira mieux ...

tu es sure de ce que tu avance ? car j'ai a priori le droit ...

de +, je ne pense pas que ça viennet de ça car si j'enregistre la page et que je la réouvre, ça ne le fait plus.

Autre remarque : sous firefox, si je fais affichage => encodage des caractère => puis je clique sur le format qui est déja selectionné, alors la page est rechargée correctement.

=> j'ai passer la page web au validateur w3c html avant de l'avoir uploadé sur le serveur et tout était OK (par contre je ne peux pas lancé le validateur sur la page qui est sur le serveur car l'IP du serveur n'est pas public)

arf tu as raison désolé je navasi pas vu que tu étais seulement dans le thead avec les th ...