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.

[laurentSc]

Bien vu no-smoking ; j'ajouterais que j'ai trouvé une petite amélioration : pour ne pas avoir le fin trait blanc entre chaque ligne du tableau (dont la première colonne est en bleu), j'ai rajouté le CSS suivant :

Code css :

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

1
2
3
4
 
.table_bouton{
border-collapse: collapse;
}

[Domi2]

Les tests que j'avais fait ne sont pas tout récent, je viens de vérifier à nouveau.

Avec ce code, seule la deuxième colonne passe en rouge, la première reste comme "pré-définie" dans l'éditeur lorsqu'on détermine une ligne ou une colonne d'entête.

C'est pour cette raison que j'avais renoncé à définir des entêtes et utiliser du CSS pour leur donner le style que je voulais.

[Invité]

Bonjour,

1/ explique quel résulta final tu souhaites obtenir, car il me semble que toutes les solutios t'ont été fournies...

2/ montre tes codes HTML et CSS actuels.
(Sinon, tu parles dans le vide...)

N.B. ce n'est pas parce que les <th> prennent un style "par défaut" qu'ils ne sont plus stylables.

[Domi2]

Bonjour,

Ce que je désire obtenir, c'est ceci.



J'obtiens ce résultat en déclarant la première colonne comme entête. Voici le code généré automatiquement par l'éditeur.

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
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">Première ligne</th>
<td class="confluenceTd">Première ligne</td>
</tr>
<tr>
<th rowspan="2" class="confluenceTh">Fusion<br /><br /></th>
<td class="confluenceTd">Deuxième ligne</td>
</tr>
<tr>
<td class="confluenceTd">Troisième ligne</td>
</tr>
<tr>
<th class="confluenceTh">Troisième ligne</th>
<td class="confluenceTd">Quatrième ligne</td>
</tr>
</tbody>
</table>

Dans ce cas, il n'y a pas besoin d'utiliser CSS

En associant le CSS suivant, il me semble que la première colonne devrait être en rouge, la deuxième en vert :

Code css :

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

1
2
3
.table_test th{background-color: red}
 
.table_test th+td{background-color: green;}

Mais j'obtiens ceci. De plus, j'ai toujours le même problème qu'initialement avec la troisième ligne de la deuxième colonne.



Je n'ai peut-être pas bien compris les solutions données plus haut.

[mrmaxwell]

Bonjour,

j'imagine que dans ton code tu veux dire

Code :

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

.confluenceTable th+td{background-color: green;}

c'est ton "+" qui te pose un problème: en css th + td selectionne les balises <td> immédiatement placées derrière une balise <th>

Cela va paraitre trivial mais pourquoi n'utilises tu pas tout simplement ?

Code :

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

.confluenceTable td{background-color: green;}

Ludo

[Domi2]

Bonjour,

Alors effectivement, avec :

Code :

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

.confluenceTable td{background-color: green;}

toute les lignes de la deuxième colonne sont désormais de couleur verte.

Dans le même temps, cela ne change évidemment pas la couleur de la première colonne, qui reste grise.

J'ai essayé d'autres choses, sans résultat.

[mrmaxwell]

Ha ben oui mais la première colonne ce sont tes balises <th> que tu stylises avec

Code :

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

.confluenceTable th{background-color: pink;}

Je n'ai pas dit de supprimer tout ton code

[friendofweb]

Bonjour, un petit code (imparfait) qui pourrait aider, je propose d'utiliser le lien comme outil. Je dois y aller à tantôt.
https://jsfiddle.net/ttfyccqk/

[Invité]

bonjour,
c'est si compliqué que ça ?

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
<table class="confluenceTable">
	<tbody>
		<tr>
			<th>Première ligne</th>
			<td>Première ligne</td>
		</tr>
		<tr>
			<th rowspan="2">Fusion</th>
			<td>Deuxième ligne</td>
		</tr>
		<tr>
			<td>Troisième ligne</td>
		</tr>
		<tr>
			<th>Troisième ligne</th>
			<td>Quatrième ligne</td>
		</tr>
	</tbody>
</table>

Code css :

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

1
2
.confluenceTable th {background-color: yellow; color: green; }
.confluenceTable td {background-color: green; color: white; }

A LIRE D'URGENCE :

• Les tableaux (XHTML & CSS)

[Domi2]

bonjour,

c'est si compliqué que ça ?

Il semblerait !

Voici ce que j'obtiens avec ton CSS :



Mais je précise que mon code HTML est différent (voir post #10). J'ai ceci :

Code :

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

<th class="confluenceTh">Première ligne</th>

au lieu de cela :

Code :

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

<th>Première ligne</th>

Je précise que si j'utilise les tables générées par l'éditeur, je ne peux pas modifier le code généré.

De plus, je n'utilise pas la classe "confluenceTable" car elle s'applique à toutes les tables insérées la page. Et comme j'ai parfois plusieurs tables différentes dans une page...

Pour pallier ce problème, je les insère dans une div. Cette façon de procéder m'autorise à utiliser une classe différente par table si nécessaire.

Et merci pour le lien, je connais bien ce tuto, c'est celui que j'ai utilisé pour construire une table "tout" HTML avec l'éditeur de Confluence (ça, c'est tout à fait possible).

[Domi2]

Ha ben oui mais la première colonne ce sont tes balises <th> que tu stylises avec

Code :

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

.confluenceTable th{background-color: pink;}

Je n'ai pas dit de supprimer tout ton code

Désolé, c'est un oubli dans le copié/collé, mais le CSS sur la première colonne était bien présent.

[mrmaxwell]

J'ai écrit ça sous codepen

http://codepen.io/ludovic-reus/pen/doxBVW

J'ai repris ton code html post 10 et mis le css que je t'ai indiqué.
Visiblement j'obtiens l'effet que tu demandes sur la première image du post 10

Où est le problème ?

[Invité]

Je précise que si j'utilise les tables générées par l'éditeur, je ne peux pas modifier le code généré.

De plus, je n'utilise pas la classe "confluenceTable" car elle s'applique à toutes les tables insérées la page. Et comme j'ai parfois plusieurs tables différentes dans une page...

Pour pallier ce problème, je les insère dans une div. Cette façon de procéder m'autorise à utiliser une classe différente par table si nécessaire.

Alors montre-nous le VRAI CODE ! (avec les div)
Et quelles modifications tu veux appliquer à certaines tables, et pas à d'autres.

En fait, ton seul problème est une méconnaissance de l'utilisation de CSS (Cascading Style Sheet) :

• Les meilleurs cours et tutoriels CSS

Ex. :

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
<div class="celle-la-oui">
   <table>
      <tr>
         <td>ce td a du style !</td>
      </tr>
      <tr>
         <td>celui-ci aussi !</td>
      </tr>
   </table>
<div>
 
<div class="celle-la-non">
   <table>
      <tr>
         <td>pas de style</td>
      </tr>
      <tr>
         <td>pas de style</td>
      </tr>
   </table>
<div>

Code css :

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

.celle-la-oui table td { background-color:yellow; font-weight:bold; }

Je te laisse deviner comment t'y prendre pour le th !


N.B. Autre solution (si ton éditeur le permet) : ajouter une class à la table, pour obtenir :
<table class="confluenceTable cette-table-oui">

Code css :

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

table.cette-table-oui td { background-color:yellow; font-weight:bold; }

[Domi2]

Le résultat est identique.

Par contre, en examinant l'élément en utilisant le code de jreaux62, je vois ceci :



Cela ne me semble pas trop normal.