Discussion :

[Domi2]

Bonsoir,

Je travaille actuellement sur un produit un peu particulier, le moteur de wiki Confluence, de la société Atlassian.

Grâce à l'aide que j'ai déjà reçue ici, j'ai pu considérablement faire avancer mon projet.

Une limitation de ce produit m'agace un peu au niveau des tables.

Dans ce cas, la "macro" proposée pour construire un tableau dans une page ne permet pas de fixer la largeur des colonnes.

Je précise cependant qu'il existe des solutions additionnelles (des "macros" plus puissantes permettant une meilleure mise en forme), mais celles-ci n'ont pas été retenues par mon employeur.

J'ai développé pour rire (et pour apprendre) une solution en HTML / CCS qui fonctionne parfaitement, mais c'est un peu lourd...

Pour en revenir à ma question, j'ai quelque chose de ce style, et malgré mes recherches, je n'ai rien trouvé de concluant (comme je suis débutant en CSS, je ne pose peut-être pas les bonnes questions).

Code colonne 1 (une cellule) :

Code :

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

<td class="confluenceTd">1</td>

Code colonne 2 (une cellule) :

Code :

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

<td class="confluenceTd">2</td>

Est-il possible, en CSS, de combiner la classe et le contenu, pour fixer des largeurs différentes aux deux colonnes ?

Je m'attend plutôt à une réponse négative, mais qui n'essaye rien...

Merci d'avance.

[Domi2]

Bonjour,

Je n'ai (malheureusement) plus le temps de tester maintenant, mais j'ai fini par trouver un excellent tutoriel sur les sélecteurs (que je ne connais pas du tout).

Ca devrait pouvoir le faire.

[Domi2]

Je me suis réjoui un peu vite.

En effet, voici le code :

Code :

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

1
2
<td class="confluenceTd"><p>Ma belle colonne une</p></td>
<td class="confluenceTd">Ma belle colonne deux</td>

Et donc pas d'attribut.

Il n'est pas possible de modifier le code des pages, il me semble donc que je suis bien coincé.

Une idée ?

Merci d'avance.

[NoSmoking]

Bonjour,
tu peux atteindre la 2^éme cellule en CSS comme ceci par exemple

Code :

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

1
2
3
4
5
6
7
8
tr td {
  background-color:#cde;
  width:10em;
}
/* on saute la première TD */
tr td+td {
  color:red;
}

mais si tu peux également jouer sur le conteneur de la TD

Code :

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

1
2
3
td p {
  background-color:#abc;
}

[Domi2]

Oui oui oui !

Ca fonctionne, j'ai bien "accès" à mes cellules

Par contre, je ne comprend par exemple pas pourquoi j'ai une balise "p" dans la première colonne et pas dans la suivante.

Demain, je vais me créer un tableau de quatre colonnes, peut-être cinq (c'est un peu le maximum que je peux de toute façon en afficher) et essayer de "jouer" avec les largeurs.

Déjà un très grand merci pour ton aide.

[Domi2]

Alors ceci fonctionne parfaitement :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* première TD */
tr td{width:100px;}
 
/* on saute la première TD */
tr td+td{color:red;}
tr td+td{width:120px;}
 
/* on saute la deuxème TD */
tr td+td+td{color:yellow;}
tr td+td+td{width:140px;}
 
/* on saute la troisème TD */
tr td+td+td+td{color:blue;}
tr td+td+td+td{width:160px;}

C'est par contre non pris en compte dans l'export, sauf la couleur de la dernière colonne, assez curieusement, il faudra que je me penche là-dessus.

Mais mon problème à l'écran est résolu et c'est l'important.

Un tout grand merci.

[NoSmoking]

Tu pourrais tout autant utiliser la pseudo-classes :nth-child (CSS3)

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
td:nth-child(1){  /* 1st enfant TD */
  color:green;
  width:100px;
}
td:nth-child(2){  /* 2nd enfant TD */
  color:red;
  width:120px;
}
td:nth-child(3){  /* 3th enfant TD */
  color:yellow;
  width:140px;
}
td:nth-child(4){  /* 4th enfant TD */
  color:blue;
  width:160px;
}

[Domi2]

Bonjour,

Cela fonctionne tout aussi bien, j'adopte.

Et là au moins, c'est cohérent lors de l'export pdf, rien ne fonctionne. Comme ça, je vais pouvoir ouvrir un bug ou une amélioration.

Encore merci pour ton aide.

[NoSmoking]

Et là au moins, c'est cohérent lors de l'export pdf, rien ne fonctionne.

l'outil ne prend donc visiblement pas en compte le CSS3.

[Domi2]

D'après les recherches que j'ai faites, l'export pdf ne soutient en effet que partiellement le CSS 3.

Evidemment, je n'ai rien trouvé de plus précis sur le "partiellement"