Discussion :

[Général03]

Bonjour,
je suis en train de réaliser un tableau et pour faire la mise en forme j'utilise CSS. Voici mon tableau :

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
<table class="tab">
		<tr>
			<td >
			        2009 
			</td>
			<td>
				Formation professionnelle en informatique</br>
			</td>
		</tr>
		<tr>
			<td>
			        2008 
			</td>
			<td>
				Licence Professionnelle</br>
			</td>
		</tr>

Et voila mon CSS

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
 
.tab{
 
border: 3px solid #BFDFFF; /*defini taille, style et couleur du contour du tableau*/
border-spacing: 1px; 
border-collapse: collapse; 
border : center;
 
/*Defini les marges (externes) autour du tableau*/
margin-top: 1em;
margin-right: 2px;
margin-bottom: 3em;
margin-left: 300px; 
 
background-color:#9966FF; /*couleur de fond du tableau*/
 
font-weight: normal; /*grosseur du texte*/
 
font-size:small; /*taille du texte*/
 
font-family:Arial, Helvetica, sans-serif;
}

Je voudrais pouvoir modifié la largeur de ma colonne de gauche (1er td dans les balises tr) sans que cela soit affecté à celle de droite.
Comment faire ?

Merci

[Général03]

Comme mon tableau possède une classe et que je veux modifier une colonne <td> de ce tableau je ne sais pas s'il est possible d'appeler une classe à l'intérieur d'une autre classe ? Ceci est possible ?

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
<table class="tab">
		<tr>
			<td class="PremiereColonne">
			        2009 
			</td>
			<td>
				Formation professionnelle en informatique</br>
			</td>
		</tr>
		<tr>
			<td>
			        2008 
			</td>
			<td>
				Licence Professionnelle</br>
			</td>
		</tr>
</table>

Dans ce cas comment appeler une classe d'une classe en CSS ?

Merci de votre aide

[bigboomshakala]

c'est du CSS, pas du javascript

[Neroptik]

Bien sûr

Code :

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

1
2
3
4
5
6
7
.tab .PremiereColonne {
min-width:100px;
}
 
.tab .DeuxiemeColonne {
width:100px;
}

Avec ça seule la colonne .PremiereColonne aura une taille minimale de 100px et peut s'agrandir tandis que la colonne .DeuxiemeColonne aura une taille fixe de 100px

et tout ça uniquement dans le tableau .tab

Voila

[Général03]

Si je fais cela

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
<table class="tab">
                <tr>
			<th colspan="2">
				Formation
			</th>
 
		</tr>
		<tr>
			<td class="PremiereColonne">
			        2009 
			</td>
			<td class="DeuxiemeColonne">
				Formation professionnelle en informatique</br>
			</td>
		</tr>
		<tr>
			<td>
			        2008 
			</td>
			<td>
				Licence Professionnelle</br>
			</td>
		</tr>
</table>

ça ne fonctionne pas, la largeur de la colonne ne se modifie pas. J'ai essayé aussi d'associer à ma 2ème ligne (3ème tr) les class "PremiereColonne" et "DeuxiemeColonne" mais rien ne se passe. J'ai vérifier que mon CSS fonctionnait en mettant le fond de ma cellule en rouge, et le CSS est bien appelé. Donc ça doit être la commande CSS suivante qui ne fonctionne pas, non?

Code :

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

width:100px;

Même si je supprime ma ligne fusionnée (1er tr) je n'arrive pas à modifier la largeur de ma colonne!
Pouvez-vous m'aider ?

Merci

[GihefBey]

Bonjour,

Vois si l'utilisation de colgroup, col peut t'aider.

Par exemple (un peu plus compliqué, mais je le laisse comme ça), teste

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
    <table class="ref" border="0">
      <col class="col1 prix" />
      <col span="2" class="colAB" />
      <col class="colC categorie" />
      <col span="4" class="colDEFG" />
      <caption class="capt">Références</caption>
      <thead>
        <tr class="tete"><th><th>A<th>B<th>Suite<th>D<th>E<th>F<th>G
      <tbody>
        <tr><td>1<td class="prix">20&nbsp;&euro;<td class="prix">30&nbsp;&euro;<td class="categorie">AX 128_525<td><td><td class="defg">x<td class="defg">&bull;
        <tr><td>2<td><td><td><td><td><td><td>
        <tr><td>3<td><td><td><td><td><td><td>
        <tr style="background-color : #ff0;"><td>4<td><td><td><td><td><td><td>
        <tr><td>5<td><td><td><td><td><td><td>
        <tr><td>6<td><td><td><td><td><td><td>
        <tr><td>7<td><td><td><td><td><td><td>
        <tr><td>8<td><td><td><td><td><td><td>
    </table>

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
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
    table {
        font-family : Georgia, Times, "Times New Roman", serif;
        width : 80%;
        margin : 1em auto;
        }
    .col1, .colAB, .colC, .colDEFG {
        font-family : 'Trebuchet MS', Verdana, sans-serif; /* sans effet */
        }
    .col1 {
        width : 50px; /* largeur "fixe" */
        background-color : #ffc0cb;
        color : #fff;
        font-family : cursive; /* sans effet */
        }
    .colAB {
        background-color : #6495ed;
        }
    .colC {
        width : 40%; /* largeur fluide */
        background-color : #32cd32;
        }
    .colDEFG {
        width : 40px; /* largeur "fixe" */
        background-color : #ffa500;
        }
 
    .ref {
        }
    .capt {
        text-align : left;
        font-style : italic;
        padding : 3px 0;
        padding-left : 15px;
        }
    .tete {
        color : #ffffe0;
        text-align : center;
        height : 2.5em;
        border-top : 2px solid #8b0000;
        border-bottom : 2px solid #8b0000;
        padding-left : 20px;
        }
    .prix {
        text-align : right;
        font-weight : bold;
        height : 1em;
        border-bottom : 1px solid #8b0000;
        padding-right : 5px;
        }
    .categorie {
        text-align : left;
        height : 1em;
        border-bottom : 1px solid #8b0000;
        padding-left : 5px;
        }
    .defg {
        text-align : center;
        font-weight : bold;
        }

-

[Général03]

J'ai trouvé la solution (grâce à toi bien sur!!!!). En faite ton code précédent fonctionnait, sauf qu'il fallait mettre "%" à la place de "px".

Code :

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

1
2
3
.tab .PremiereColonne {
width:10%;
}

Merci beaucoup de ton aide,