Discussion :

[Invité]

Bon.

Il existe manifestement une feuille de style gérant les tables.

Dans le contrôleur (copie d'écran que tu as faite), regarde la ligne au dessus.
Le style est "écrasé" par un autre style, défini après (ou dans une autre feuille déclarée après).

Il nous manque des éléments que tu ne montres pas.

On ne peux rien faire de plus pour toi TANT QUE TU NE MONTRERAS PAS :

• ta page en ligne,
• et/ou le code HTML généré ("Ctrl" + "U")

BREF : une vision d'ensemble !

[Domi2]

Il est vrai que je suis pas un grand expert en la matière, mais j'ai déjà réussi à appliquer pas mal de choses, notamment grâce aux forums DVP.

Et ce que je cherche à faire, c'est simplement à conserver une maîtrise complète sur le style de mes lignes, colonnes et cellules.

J'y arrive bien avec des tables ou l'entête est la première ligne, nettement moins lorsque l'entête est la première colonne.

Voici un exemple de code complet, avec une div et une classe table test :

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
<div class="table_test">
   <div class="table-wrap">
      <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>
   </div>
</div>

Le CSS :

Code css :

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

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

Le résultat :

[Domi2]

Pour la page en ligne, ce n'est pas possible, mais voici le code généré en pièce jointe :

Test.htm

[Invité]

Sans les fichiers CSS associés, ça n'a aucun intérêt.

Bon.

Regarde dans la console.
Quand des propriétés CSS sont barrées, ça signifie qu'elle sont "surchargées" par d'autres.*
Regarde dans les lignes au dessus (qu'on devine sur l'image ci-dessus).
Tu verras :

• les styles actifs (non barrés),
• le nom du fichier CSS dont ils sont issus et à quelle ligne (ex. : batch.css:117)

Ton problème est simple :
Il suffit de mettre tes styles CSS (que tu veux/dois rajouter) au bon endroit pour qu'ils soient pris en compte !

Solution :
Pour que tes styles CSS soient pris en compte :
Il faut qu'ils soient insérés dans la page APRÈS LES AUTRES (après les feuilles de style).
DONC : mets-les JUSTE AVANT la balise </head>.

[Domi2]

Bonsoir,

Sans les fichiers CSS associés, ça n'a aucun intérêt.

Je m'en doute, sauf que je n'y ai pas accès.

En fait je ne suis "utilisateur" que d'un "espace" Confluence, comme il en existe environ 40 autres chez mon employeur.

Pour l'avoir lu, je sais évidemment qu'il existe des style CSS par défaut, qui s'applique à tous les espaces. Seuls les administrateurs du produit peuvent modifier ces styles, ce qu'ils ne feront évidemment jamais, à moins de vouloir volontairement affecter tous les espaces.

En théorie, un code CSS placé dans une page distincte devrait permettre de "surcharger" les styles par défaut. Cela semble vrai dans certains cas, j'ai par exemple modifié la couleur des liens, changé l'aspect du haut de page, caché des champs et j'en passe.

Par contre, cela semble ne pas fonctionner, du moins en partie, pour les tables, qui soit dit en passant reste la grosse faiblesse de Confluence.

Pour ce qui est de placer le code CSS à un endroit déterminé, je n'ai guère le choix. En effet, l'éditeur permet d'insérer une "macro feuille de style CSS", mais cela génère le code sans que j'aie la possibilité d'influencer à quel endroit.

Mais j'ai lu avec beaucoup d'intérêt vos informations et je vais voir sur les forums Confluence s'il n'existe pas une solution de contournement.

Et il faudra que j'évalue jusqu'à quel point j'utilise CSS pour modifier le style de mes tables.

Je vous remercie infiniment pour votre patience, vous m'en avez appris beaucoup.

[NoSmoking]

Tu es visiblement en face d'un problème de spécificité (poids) de sélecteur, Bovino explique cela très bien dans Règles d'application des styles CSS et gestion des conflits.

• Un outil d'aide au calcul (il en existe surement d'autres)

[friendofweb]

Si je comprends bien, tu n'as pas accès aux fichiers sources ? Si je comprends bien tu travailles directement dans le navigateur ? Lequel google chrome ? Quelle version (permet de donner un indice quand à la compatibilité des codes qui te son proposés). Si ce que je viens d'écrire est vrai, alors tu peux enregistrer la page web (complète) sous un répertoire auquel tu as accès et créer une mise en page CSS à ta guise..

Pour :

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.

, je suis un peu septique, quel outil utilises-tu pour convertir ta page web en fichier pdf ? Il doit y avoir des outils disponibles sur le Web..

Si je comprends mal, explique-moi s'il te plaît.

[Domi2]

Bonjour,

Nous travaillons sous FF ou IE (la dernière version FF déployée est la 31.0).

Ta solution d'enregistrer une page dans un répertoire suppose certainement que je serai le seul utilisateur à y avoir accès ?

Quant au convertisseur, il est intégré au logiciel.

Mais dans les dernières versions du produit, les pseudo-sélecteurs, par exemple, ne sont pas supportés. Cela fonctionne par contre bien à l'écran mais cela ne me suffit pas.

A noter que la société éditrice ne garantit pas le support de CSS sur ses produits. Il ne me servirai donc à rien d'ouvrir un bug sur leurs forums pour signaler ce problème.

[Invité]

Bonjour
LIS les liens fournis par NoSmoking.

Dans le fichier htm que tu as fourni en lien, on retrouve bien le code html de ta table "test" :

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
	<div class="table_test">
	<div class="table-wrap">
		<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>
	</div>
	</div>

Afin de surcharger au maximum le CSS (pour que le sélecteur ait le maximum de "poids"), teste :

Code css :

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

1
2
.table_test .table-wrap .confluenceTable th.confluenceTh {background-color: yellow; color: green; }
.table_test .table-wrap .confluenceTable td.confluenceTd {background-color: green; color: white; }

Si ce n'est pas suffisant, on va augmenter le "poids" du sélecteur :

Code css :

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

1
2
#main-content .table_test .table-wrap .confluenceTable th.confluenceTh {background-color: yellow; color: green; }
#main-content .table_test .table-wrap .confluenceTable td.confluenceTd {background-color: green; color: white; }

Et ainsi de suite, jusqu'à ce que son "poids" dépasse ceux déjà enregistrés.


sinon... => montre-nous une copie d'écran de l'inspecteur d’élément (comme la précédente, mais en montrant ce qui est écrit au dessus)

[Domi2]

Bonjour,

Désolé pour l'interruption, mais je n'étais pas disponible la fin de la semaine dernière.

LIS les liens fournis par NoSmoking.

Ne t'en fais pas, j'y ai passé mon mercredi soir passé. Et j'avoue que ce n'est pas simple à comprendre.

J'ai fait des tests avec les exemples que tu m'as donné.

Avec :

Code :

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

1
2
3
4
5
.table_test .confluenceTable th.confluenceTh {background-color: yellow; color: green;}
.table_test .confluenceTable td.confluenceTd {background-color: green; color: white;}
 
.table_test_deux .confluenceTable th.confluenceTh {background-color: green; color: white;}
.table_test_deux .confluenceTable td.confluenceTd {background-color: yellow; color: green;}

j'obtiens finalement ceci :



C'est vraiment super.

Et sur le même principe, j'ai également pu résoudre un autre petit problème sur ces lignes d'entête.

Cela m'ouvre pas mal de perspectives.

Encore merci à tous.