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

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

++

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

Dimensionnement en CSS

Discussions similaires

Partager

Partager