Changement CSS générique de première ligne TR sans utiliser TH

[drumtof]

Bonjour à tous,

Je rencontre un souci de CSS avec un éditeur XML. Ce dernier permet d'éditer des tableaux simples de la manière ayant la structure suivante :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<table>
     <tbody>
          <tr>
               <td></td>
               <td></td>
          </tr>
          <tr>
               <td></td>
               <td></td>
          </tr>
     </tbody>
</table>

J'aimerai savoir s'il existe une technique CSS pour appliquer un style à la première ligne seulement, pour simuler l'en-tête de tableau <TH></TH> normalement utilisée en HTML en sachant que je n'ai la main que sur le CSS (Impossible d'éditer du JS spécifique ou de donner le nom d'une classe spéciale à la première ligne)

J'ai essayé le pseudo élément "first-line" mais sans succès.

Quelqu'un aurait-il une piste ?

Merci pour votre aide
TOF

[Marc22]

bonjour,

pas sûr d'avoir tout compris,

ton code là est modifiable?

si oui, tu mets simplement un attribut style, ou un id ou une une class dans la ligne tr?

Code :

<tr style="">

[CCyrillus]

Bonsoir,

Envoyé par drumtof

J'ai essayé le pseudo élément "first-line" mais sans succès.

presque, le selecteur serait: tr:first-child ou plutôt tr:first-child td ...

[drumtof]

Envoyé par Marc22

bonjour,

pas sûr d'avoir tout compris,

ton code là est modifiable?

si oui, tu mets simplement un attribut style, ou un id ou une une class dans la ligne tr?

Code :

<tr style="">

LOL si cela avait été aussi simple je n'aurais pas posté de message ...

[drumtof]

Envoyé par CCyrillus

Bonsoir,

presque, le selecteur serait: tr:first-child ou plutôt tr:first-child td ...

Merci je test cette piste cette aprem et vous tiens au courant.... (C'est compatible IE et FF ?)

[drumtof]

Ta solution marche nickel CCyrillus avec quelques ajustement eu égard à ma CSS déjà existante. Merci bcp.

Peut-on faire la même technique pour simuler les en-tête de ligne ?

[drumtof]

La réponse est oui pour les en-tête de ligne :

Code :

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
 
/* les mise en forme des tableaux */
 
/* les autres lignes */ 
.tbl_td{
	border: 2px solid #000080;		
	background-color: transparent;
	text-align : center;
}
 
/* Les cellules */
.tbl_cell {	
	background-color: transparent;		
}
 
/* Les par des cellules */
.tbl_cell .par {	
	padding-left: 5px;
	padding-right: 5px;
	color : #000080;	
}
 
/* En-tête ligne */
.tbl_td:first-child .tbl_cell .par{
    text-align : left;
}  
 
/* En-tête de colonne */ 
.tbl_tr:first-child td{
    background-color: #000080;
}
.tbl_tr:first-child td .par{
    color : white;
}

Le rendu en PJ.


Mon nouveau casse tête est de pouvoir centrer la cellule à la jonction de l'en-tête de ligne et de colonne. Avec mon code on peut se rendre compte qu'elle est alignée à gauche grâce à ".tbl_td:first-child .tbl_cell .par", mais je voudras qu'elle soit centrée comme toute les en-tête de colonne !!

Mon code est-il mal fait ? ou dois-je me diriger vers une autre option ?

Merci bcp