Faire des cellules de largeur fixe

Version imprimable

Bonjour a tous.

Voila j'ai un souci pour faire en sorte que ce que je veuille marche sur IE mais aussi sur FIREFOX

Voici mon code

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
<html>
<head>
<style>
.case_mois{
  border: 2px solid #4575b8;
  border-collapse:collapse;
  width:15px;
  text-align:center;
}
</style>
<script>
    function start() {
		jour_mois = new Array("D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V","S");
		var row = document.createElement("tr");
 
		for (var i = 1; i <= 28; i++) {
			cell = document.createElement("td");
 
			if (document.all)
				cell.setAttribute("className", "case_mois");	
			else
				cell.setAttribute("class", "case_mois");				
 
			texte = document.createTextNode(jour_mois[i-1]);
 
			cell.appendChild(texte);
			row.appendChild(cell);
		 }
 
		document.getElementById('id_du_tbody').appendChild(row);
		document.getElementById('id_du_tbody').setAttribute("border", "1");	
    }
</script>
</head>
<body onload="start()">
<table width="817" height="323" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="100">&nbsp;</td>
    <td width="500"><table cellpadding="0" cellspacing="0"><tbody id="id_du_tbody"></tbody></table></td>
    <td width="100">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

je voudrais savoir comment faire pour :
- faire en sorte que la table des jours de la semaine (celle du centre) prenne 100% en largeur de la table dans laquelle elle se trouve
- faire en sorte que toutes les cellules aient la meme taille sous firefox

Merci de votre aide. Je sèche lamentablement.

Bon j'ai résolu mon problème concernant le premier point

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
<html>
<head>
<style>
.case_mois{
  border: 2px solid #4575b8;
  border-collapse:collapse;
  text-align:center;
  width:17px;
}
</style>
<script>
    function start() {
		jour_mois = new Array("D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V","S");
		var row = document.createElement("tr");
 
		for (var i = 1; i <= 28; i++) {
			cell = document.createElement("td");
 
			if (document.all)
				cell.setAttribute("className", "case_mois");	
			else
				cell.setAttribute("class", "case_mois");				
 
			texte = document.createTextNode(jour_mois[i-1]);
 
			cell.appendChild(texte);
			row.appendChild(cell);
		 }
 
		document.getElementById('id_du_tbody').appendChild(row);
		document.getElementById('id_du_tbody').setAttribute("border", "1");	
    }
</script>
</head>
<body onload="start()">
<table width="800" height="323" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="100">&nbsp;</td>
    <td width="600"><table cellpadding="0" cellspacing="0" width="100%"><tbody id="id_du_tbody"></tbody></table></td>
    <td width="100">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Maintenant le 2ème. Est-ce que qq'un saurait pourquoi les cases de mon mois de février (puisque c'est de ça dont il s'agit) n'ont pas toutes la même taille sous FIREFOX.

Merci

18/02/2008, 09h22
SpaceFrog

Code:

cell.style.className= "case_mois");
18/02/2008, 09h22
identifiant_bidon

Après plusieurs investigations, je me demandais s'il n'y avait pas un pb entre la propriété css width et firefox ... Je n'arrive toujours pas a faire en sorte que toutes mes cases aient la meme taille :cry:

Edit : ok excuse moi SpaceFrog , j'avais pas vu ton message. Je vais essayer ça, merci
18/02/2008, 09h30
identifiant_bidon

Non ca ne marche toujours pas

J'ai remplacé

Code:

cell.setAttribute("class", "case_mois");

par

Code:

cell.style.className = "case_mois";

Les dernières cases de mon mois sont toujours plus petites que les autres :cry:
18/02/2008, 10h42
identifiant_bidon

Personne n'a une petite idée ? Je n'ai toujours pas trouvé et je ne suis pas loin de pleurer ... :cry:
18/02/2008, 11h07
SpaceFrog

Code:

cell.style.className = "case_mois";

pour IE

Code:

cell.className = "case_mois";

pour les autres ...
18/02/2008, 11h12
SpaceFrog

ceci étant si le contenu est plus large que la cellule, il faudra mettre un div avec un overflow:hidden ou auto

Non :( Cela ne marche toujours pas malheureusement. Le contenu est juste ce qui se trouve dans le tableau "jour_mois" - donc seulement une lettre par case.

Les tailles des cases changent toujours en fonction du contenu

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
<html>
<head>
<style>
.case_mois{
  border: 2px solid #4575b8;
  border-collapse:collapse;
  text-align:center;
  width:30px;
}
</style>
<script>
    function start() {
		jour_mois = new Array("D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V");
		var row = document.createElement("tr");
 
		for (var i = 1; i <= 20; i++) {
			cell = document.createElement("td");
 
			if (document.all)
			{
				//cell.setAttribute("className", "case_mois");	
				cell.style.className = "case_mois";	
			}
			else {
				//cell.setAttribute("class", "case_mois");		
				cell.className = "case_mois";	
			}
			texte = document.createTextNode(jour_mois[i-1]);
 
			cell.appendChild(texte);
			row.appendChild(cell);
		 }
 
		document.getElementById('id_du_tbody').appendChild(row);
		document.getElementById('id_du_tbody').setAttribute("border", "1");	
    }
</script>
</head>
<body onload="start()">
<table width="800" height="323" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="100">&nbsp;</td>
    <td width="600"><table cellpadding="0" cellspacing="0" width="100%"><tbody id="id_du_tbody"></tbody></table></td>
    <td width="100">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

18/02/2008, 14h48
identifiant_bidon

Pas une petite idée ?? Je sèche piteusement ....
18/02/2008, 14h49
SpaceFrog

enlève le width du table ???
18/02/2008, 14h57
identifiant_bidon

Merci SpaceFrog mais c'est toujours pas ça.

J'ai essayé beaucoup beaucoup de choses sans succès. Peut etre y a-t-il une propriété css magique qui pourrait faire en sorte que mes cases aient toutes la meme taille sous FIREFOX exactement comme sous IE

ou tout simplement peut etre que c'est pas possible :evilred:
18/02/2008, 15h16
SpaceFrog

a priori si tu mets le même class sur les cellules, que leur contenu ne dépasse pas et que tu ne spécifies pas de width au table ni tr ...
toutes tes cellules auront la même largeur ...
Tu dois avoir un bug dans ton code ...

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
<html>
<head>
<style>
.case_mois{
  border: 2px solid #4575b8;
  border-collapse:collapse;
  text-align:center;
  width:50px;
}
</style>
<script>
    function start() {
		jour_mois = new Array("D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V");
		var row = document.createElement("tr");
 
		for (var i = 1; i <= 20; i++) {
			cell = document.createElement("td");
 
			if (document.all)
			{
				cell.setAttribute("className", "case_mois");	
				//cell.style.className = "case_mois";	
			}
			else {
				cell.setAttribute("class", "case_mois");		
				//cell.className = "case_mois";	
			}
			texte = document.createTextNode(jour_mois[i-1]);
 
			cell.appendChild(texte);
			row.appendChild(cell);
		 }
 
		document.getElementById('id_du_tbody').appendChild(row);
		document.getElementById('id_du_tbody').setAttribute("border", "1");	
    }
</script>
</head>
<body onload="start()">
<table  height="323" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td ><table cellpadding="0" cellspacing="0" ><tbody id="id_du_tbody"></tbody></table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Voila je n'ai plus aucun width, chacune de mes cellules a la mm class, pas de débordement et pourtant sous IE chaque case du tableau fait bien 50px alors que sous FIREFOX la taille des cases est ajustée au contenu.

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
<html>
<head>
<style>
table {width:auto;}
.case_mois{
  border: 2px solid #4575b8;
  border-collapse:collapse;
  text-align:center;
  width:50px;
 }
</style>
<script>
    function start() {
		jour_mois = new Array("D","L","M","M","J","V","S","D","L","M","M","J","V","S","D","L","M","M","J","V");
 
		var row = document.createElement("tr");
 
		for (var i = 1; i <= 20; i++) {
				cell = document.createElement("td");
 
			cell.innerHTML=jour_mois[i-1];
			cell.className = "case_mois";	
			row.appendChild(cell);
		 }
 
		document.getElementById('innerTable').getElementsByTagName('tbody')[0].appendChild(row);
		document.getElementById('id_du_tbody').style.width="100%";	
    }
</script>
</head>
<body onload="start()">
<table  height="323" border="1" cellpadding="0" cellspacing="0" >
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td ><table id="innerTable" cellpadding="0" cellspacing="0" ><tbody id="id_du_tbody"></tbody></table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

18/02/2008, 16h34
identifiant_bidon

Super SpaceFrog, ça marche. Je vois les 2 / 3 modifs que tu as faites. A vrai dire, ca me laisse perplexe ...

Merci beaucoup en tout cas
18/02/2008, 16h38
SpaceFrog

la modif la plus en rapport avec ton problème est le 100% sur le width du innerTable ...