28220 sujets

CSS et mise en forme, CSS3

Tableau avec bordure spécial sur une ligne ...

Bonjour à tous,

Je vais essayer de m'expliquer clairement ....
J'ai un tableau qui affiche différents enregistrements de ma base.

Or, j'ai quelques lignes de ce tableau pour lesquels j'aimerais que la bordure basse soit verte, sans que cela ne se fasse pour totues les lignes du tableau ...

j'ai donc essayé de faire un code css : 
TABLE.essai         
   {border-collapse: separate;}
tr.essaitr 
   {border-bottom: 2px solid yellow;}


et ca fonctionne pas ... J'imagine que je n'ai aps du tout la bonne syntaxe ... Mais ce que je voudrais c avec mon code css, avroi un truc comme ca : 

<TABLE>
<tr>
   <td>la une ligne sans bordure en bas</td>
</tr>
<tr class="essaitr">
   <td>la, une ligne avec la bordure, comme j'appelle la ppté tr.essaitr</td>
</tr>


Merci d'avance pour votre aide !

Smiley smile
Bonjour.
 <style type="text/css">
.cellule
{border-bottom:1px; solid;
border-color:#555555;
}
</style>
<body>
<table> <tr><td class="cell"></td></tr></table>
Modérateur
J'irais plutôt par ligne, plutôt que par cellule :

CSS :

table {
border-collapse:separate;
}

td, th {
border:1px solid #000;
padding:0.5em;
}

table tr.ligne_speciale td {
border-bottom:4px solid green;
}


HTML :


<table summary="Un tableau de données qui représente n'importe quoi"><caption>Démo - Border Bottom</caption>
	<thead>
		<tr>
			<th>Colonne 1</th>
			<th>Colonne 2</th>
			<th>Colonne 3</th>
		</tr>
	</thead>
	<tbody>
		<tr class="ligne_speciale">
			<td>Cellule 1 - Ligne 1</td>
			<td>Cellule 2 - Ligne 1</td>
			<td>Cellule 3 - Ligne 1</td>
		</tr>
		<tr>
			<td>Cellule 1 - Ligne 2</td>
			<td>Cellule 2 - Ligne 2</td>
			<td>Cellule 3 - Ligne 2</td>
		</tr>
		<tr class="ligne_speciale">
			<td>Cellule 1 - Ligne 3</td>
			<td>Cellule 2 - Ligne 3</td>
			<td>Cellule 3 - Ligne 3</td>
		</tr>
	</tbody>
</table>


Si tu veux que les cellules soient collées ensemble, pour que la bordure du bas ne coupe pas entre les cellules, met un border-collapse:collapse à ton tableau, au lieu de border-collapse:separate.

En espérant que ca puisse t'aider. Fais attention également aux autres déclarations que tu met à ton tableau ou à ses éléments. Parfois le style de bordure du tableau lui-même prend le dessus sur le style des cellules, celles du bas en l'occurance.
Modifié par Merkel (29 Sep 2005 - 15:43)
Sujet clos
Aller à