Fixer la largeur d'une table pour qu'elle ne change pas quand on fait une sélection [Résolu]

baggie · 25/11/2010, 11h47

Bonjour !

Bon petit problème relativement simple que je n'arrive malheureusement pas à résoudre.

J'ai une table avec une seule colonne et douze lignes.
Quand je clique sur le texte d'une ligne, celui-ci passe en gras et une bordure s'affiche autour de ma cellule.

Sauf qu'à ce moment là, la largeur de ma table change.

Comment éviter ça ?

J'ai essayé de fixer une taille mais rien à faire, dès que je clique sur un mot un peu long, la largeur de ma table change.

Code HTML :

Code :

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

1
2
3
4
5
6
7
 
<table id="tablemois">
<tr><td id="mois-1">Janvier</td></tr>
<tr><td id="mois-2">Février</td></tr>
<tr><td id="mois-3">Mars</td></tr>
<tr><td id="mois-n">n</td></tr>
</table>

Code CSS quand on clique sur un mois :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.moisencours {
	background: -webkit-gradient(linear, left top, left bottom, from(#FF8060), to(#F9AB86));
	font-weight: bold;
	color: #FFF;
	padding: 5px;
	border: 2px solid #F66;
	font-size: 18px;
	text-align:center;
}

Et j'ai testé en CSS :

Code :

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

1
2
3
4
 
#tablemois td {
	width: 100px;
}

Si vous pouviez m'aider ... ^^
Merci

ornitho13 · 25/11/2010, 12h07

Salut,

le probleme vient de ton padding et de ta bordure qui va allonger la largeur de ta cellule.

Essaye ce code:

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <link rel="stylesheet" type="text/css" href="external.css" />
  <title>CSS Positioning: Relative</title>
 
    <style>
    #tablemois{
    	border:1px solid #000;
    }
 .moisencours {
	background: -webkit-gradient(linear, left top, left bottom, from(#FF8060), to(#F9AB86));
	font-weight: bold;
	color: #FFF;
	text-align:center;
	border: 2px solid #F66;
	font-size: 18px;
	text-align:center;
}
 #tablemois td {
	width: 100px;
	border:1px solid transparent;
}
    </style>
 
</head>
 
<body>
 
<table id="tablemois" cellspacing="0" cellpadding="0">
	<tr><td id="mois-1" onclick="this.className='moisencours'">Janvier</td></tr>
	<tr><td id="mois-2">Février</td></tr>
	<tr><td id="mois-3">Mars</td></tr>
	<tr><td id="mois-n">n</td></tr>
</table> 
 
</body>
</html>

j'ai rajouté un onclick sur la première cellule, pour émuler ton comportement et j'ai également ajouter une bordure autour de la "table" afin que tu puisses voir que la taille ne bouge pas

++

baggie · 25/11/2010, 13h50

Merci pour ta réponse, malheureusement ça ne fonctionne pas.
Quand je clique sur un mois "court" (genre Mai) puis ensuite sur un mois long (genre Septembre), j'ai bien ma colonne qui bouge et la largeur qui augmente.

ornitho13 · 25/11/2010, 17h42

Pourrais tu envoyer un lien vers ta démo s'il te plait?

baggie · 26/11/2010, 11h53

Ce n'est pas en ligne

Je ne peux que donner mon code HTML et CSS !

ornitho13 · 26/11/2010, 15h49

Je viens de faire un test avec ce que je t'avais donnée avec mois cours et long et cela fonctionne...

Pourrais tu me donner le code de ta page entière (HTML, CSS, Javascript) afin que je vois mieux où se situe le problème?

merci

++

baggie · 29/11/2010, 08h41

Ok, merci !

Voici mon code javascript qui crée donc ma liste :

Code javascript :

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
 
// Affichage de la liste des mois
var mois = eval(date.getMonth()+1);
var correspondance = {};
correspondance[1] = 'Janvier';
correspondance[2] = 'Février';
correspondance[3] = 'Mars';
correspondance[4] = 'Avril';
correspondance[5] = 'Mai';
correspondance[6] = 'Juin';
correspondance[7] = 'Juillet';
correspondance[8] = 'Août';
correspondance[9] = 'Septembre';
correspondance[10] = 'Octobre';
correspondance[11] = 'Novembre';
correspondance[12] = 'Décembre';
 
for(m=1;m<13;m++)
{	
        $("#tablemois").append('<tr><td id="mois-'+m+'" class="mois">'+correspondance[m]+'</td></tr>');
	// Si le mois est le mois actuel, on met la classe à l'élément
	if(m == mois)
	{
		$("#mois-"+m).attr('class','moisencours');					
	}
}

Mon code HTML :

Code :

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

1
2
3
 
<table id="tablemois">
</table>

Et ma CSS :

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
 
#tablemois td {
	width: 100px;
}
 
.moisencours {
	background: -webkit-gradient(linear, left top, left bottom, from(#FF8060), to(#F9AB86));
	font-weight: bold;
	color: #FFF;
	padding: 5px;
	border: 2px solid #F66;
	font-size: 18px;
	text-align:center;
}
 
.mois {
	background-color: #ffd497;
	padding: 5px;
	font-size: 16px;
	text-align:center;
	border-bottom: 1px solid #f47f10;
}

ornitho13 · 29/11/2010, 11h50

Salut,

j'ai repris ton code que j'ai légèrement modifié. En fait tu n'avais pas bien pris en compte toute la css que je t'avais fourni.

De plus j'ai rajouté

Code javascript :

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

1
2
 
$(function(){...})

afin de chargé ta liste une fois le DOM chargé. J'ai également instancié la class Date() car date n'équivalait à rien.

Voici ce que cela donne:

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
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
 
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	 	<title>CSS Positioning: Relative</title>
 
	 	<script type="text/javascript" src="/script/jquery.min.js?6372"></script>
	 	<script type="text/javascript">
	 	$(function(){
			var date = new Date();
			var mois = eval(date.getMonth()+1);
			var correspondance = {};
			correspondance[1] = 'Janvier';
			correspondance[2] = 'Février';
			correspondance[3] = 'Mars';
			correspondance[4] = 'Avril';
			correspondance[5] = 'Mai';
			correspondance[6] = 'Juin';
			correspondance[7] = 'Juillet';
			correspondance[8] = 'Août';
			correspondance[9] = 'Septembre';
			correspondance[10] = 'Octobre';
			correspondance[11] = 'Novembre';
			correspondance[12] = 'Décembre';
 
			for(m=1;m<13;m++)
			{	
			        $("#tablemois").append('<tr><td id="mois-'+m+'" class="mois">'+correspondance[m]+'</td></tr>');
				// Si le mois est le mois actuel, on met la classe à l'élément
				if(m == mois)
				{
					$("#mois-"+m).attr('class','mois moisencours');					
				}
			}
			$("#tablemois td").click(function(){
				$(this).toggleClass('moisencours');
			});
	 	});
		</script>
	    <style>
		#tablemois td {
			width: 100px;
			border:1px solid transparent;
		}
 
		.moisencours {
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="FF8060", endColorstr="F9AB86"); /* Pour IE seulement et mode gradient à linear */
			background: -webkit-gradient(linear, left top, left bottom, from(#FF8060), to(#F9AB86));
			background: -moz-linear-gradient(top center, #FF8060, #F9AB86);
			font-weight: bold;
			color: #FFF;
			padding: 5px;
			border: 2px solid #F66;
			font-size: 18px;
			text-align:center;
		}
 
		.mois {
			background-color: #ffd497;
			padding: 5px;
			font-size: 16px;
			text-align:center;
			border-bottom: 1px solid #f47f10;
		}
	    </style>
	</head>
	<body>
		<table id="tablemois">
		</table>
	</body>
</html>

J'ai testé sur Chrome, Safari, FF, et IE7 ET 8 et cela fonctionne bien ( j'ai rajoute des dégradés pour FF et IE)

++

25/11/2010, 13h50	#3
baggie Membre confirmé Inscription : octobre 2007 Messages : 676 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : octobre 2007 Messages : 676 Points : 225 Points : 225	Merci pour ta réponse, malheureusement ça ne fonctionne pas. Quand je clique sur un mois "court" (genre Mai) puis ensuite sur un mois long (genre Septembre), j'ai bien ma colonne qui bouge et la largeur qui augmente.
	00

25/11/2010, 17h42	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Pourrais tu envoyer un lien vers ta démo s'il te plait?
	00

26/11/2010, 11h53	#5
baggie Membre confirmé Inscription : octobre 2007 Messages : 676 Détails du profil Informations personnelles : Âge : 23 Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : octobre 2007 Messages : 676 Points : 225 Points : 225	Ce n'est pas en ligne Je ne peux que donner mon code HTML et CSS !
	00

26/11/2010, 15h49	#6
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Je viens de faire un test avec ce que je t'avais donnée avec mois cours et long et cela fonctionne... Pourrais tu me donner le code de ta page entière (HTML, CSS, Javascript) afin que je vois mieux où se situe le problème? merci ++
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email