Discussion :

[Domi2]

Bonjour,

J'avais déjà ouvert une discussion sur un sujet similaire, ici.

Je précise que j'utilise CSS2 et non CSS3 car ce dernier n'est pas supporté lors de l'export des pages vers un document .pdf.

Voici mon problème.

J'ai défini un tableau de deux colonnes dont celle de gauche est le titre de la table.

Le contenu de cette colonne est en gras, le fond de de couleur grise.

Dans la colonne de droite, la couleur de fond est blanche, la police normale.

Cela fonctionne parfaitement avec ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
/*Couleur de fond de la première colonne*/
.table_bouton td{background-color: #F0F0F0;}
 
/*Rétablir le fond de couleur blanche pour les colonnes suivantes*/
.table_bouton td+td{background-color: #FFFFFF;}
 
/*Épaisseur de trait de la police de la première colonne*/
.table_bouton td{font-weight: bold;}
 
/*Rétablir l'épaisseur de trait de la police pour les colonnes suivantes*/
.table_bouton td+td{font-weight: normal;}

Mais cela ne fonctionne plus dès lors que des cellules de la première colonne sont fusionnées. En effet, la mise en forme s'applique bien à la première ligne en regard des cellules fusionnées, mais plus à partir de la deuxième. Voir image.



Une idée ?

Merci d'avance.

[Jacques Beauregard]

Bonjour,

Pourrais-tu nous fournir également le code HTML associé?
Merci

[Domi2]

Bonjour,

Voici le 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
<tbody>
<tr>
<td colspan="1" class="confluenceTd">Première ligne</td>
<td colspan="1" class="confluenceTd"></td>
</tr>
<tr>
<td class="confluenceTd">Deuxième ligne</td>
<td class="confluenceTd"></td>
</tr>
<tr>
<td class="confluenceTd">Troisième ligne</td>
<td class="confluenceTd">Test</td>
</tr>
<tr>
<td rowspan="3" class="confluenceTd">Fusion<br /><br /></td>
<td colspan="1" class="confluenceTd">Test</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">Test</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">Test</td>
</tr>
</tbody>

[NoSmoking]

Bonjour,
change la structure de ton document en utilisant des <th> en première colonne, il te sera plus facile de cibler en CSS

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
<table>
  <tr>
    <th>Première ligne</th>
    <td>Test</td>
  </tr>
  <tr>
    <th>Deuxième ligne</th>
    <td>Test</td>
  </tr>
  <tr>
    <th rowspan="3">Troisième ligne</th>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
</table>

avec un simple

Code :

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

1
2
3
.table_bouton th{
  background-color: #F0F0F0;
}

devrait le faire.

Nota : les <th> sont utilisée en mode scope="row" dans ce cas.

[Domi2]

Bonjour,

En fait, je peux définir automatiquement la première colonne comme étant celle d'entête de la table.

Et là, je n'ai même pas besoin de CSS pour que cela fonctionne, cellules fusionnées ou non.

La première colonne est automatiquement de couleur grise et en gras, la ou les suivantes de couleur blanche avec une police normale.

Le problème, c'est qu'il semble qu'en faisant comme ça, il n'y a plus moyen de donner un style différent à la première colonne.

[NoSmoking]

Le problème, c'est qu'il semble qu'en faisant comme ça, il n'y a plus moyen de donner un style différent à la première colonne.

il te suffit de rajouter le CSS suivant, pour exemple

Code :

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

1
2
3
4
.table_bouton td{
  color: red;
  width:20em
}

pour atteindre la 2^éme colonne, qui est en fait la 1^ére TD, dans l'exemple.