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

++

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

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager