Faire des cellules de largeur fixe

**identifiant_bidon** · 17/02/2008, 17h52

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 :

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>
.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.

**identifiant_bidon** · 17/02/2008, 18h51

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

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>
.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

**SpaceFrog** · 18/02/2008, 09h22

Code :

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

cell.style.className= "case_mois");

**identifiant_bidon** · 18/02/2008, 09h22

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

Edit : ok excuse moi SpaceFrog , j'avais pas vu ton message. Je vais essayer ça, merci

**identifiant_bidon** · 18/02/2008, 09h30

Non ca ne marche toujours pas

J'ai remplacé

Code :

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

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

par

Code :

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

cell.style.className = "case_mois";

Les dernières cases de mon mois sont toujours plus petites que les autres

**identifiant_bidon** · 18/02/2008, 10h42

Personne n'a une petite idée ? Je n'ai toujours pas trouvé et je ne suis pas loin de pleurer ...

**SpaceFrog** · 18/02/2008, 11h07

Code :

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

cell.style.className = "case_mois";

pour IE

Code :

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

cell.className = "case_mois";

pour les autres ...

**SpaceFrog** · 18/02/2008, 11h12

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

**identifiant_bidon** · 18/02/2008, 11h38

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 :

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
<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>

**identifiant_bidon** · 18/02/2008, 14h48

Pas une petite idée ?? Je sèche piteusement ....

**SpaceFrog** · 18/02/2008, 14h49

enlève le width du table ???

**identifiant_bidon** · 18/02/2008, 14h57

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

**SpaceFrog** · 18/02/2008, 15h16

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 ...

**identifiant_bidon** · 18/02/2008, 16h17

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
<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.

**SpaceFrog** · 18/02/2008, 16h31

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
<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>

**identifiant_bidon** · 18/02/2008, 16h34

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

**SpaceFrog** · 18/02/2008, 16h38

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

Faire des cellules de largeur fixe

JavaScript

Discussions similaires

Partager

Partager