28173 sujets

CSS et mise en forme, CSS3

[Résolu] Bordure, background color et tableau

Bonjour !

Une fois encore, je fais appel à votre savoir =)

http://img248.imageshack.us/my.php?image=extraittableau9rb.jpg

Je souhaiterais faire un tableau comme l'image.

Voici un extrait du code CSS du tableau, qui fait à peu près ce qu'il faut :

#TableUser {
    border-collapse : collapse;
    width : 85%;
    margin : auto;
    text-align : center;
    font : 11px Microsoft Sans Serif;
}
#TableUser thead {
    color : #70C043; /* vert */
    font : 11px Microsoft Sans Serif;
    font-weight : bold;
}
#TableUser tbody {
    border : 1px solid #808080;
}
#TableUser th {
    padding : 5px;
    border : 1px solid #808080;
}
#TableUser td {
    font : 11px Microsoft Sans Serif;
    font-size : 90%;
    color : #808080;
    padding : 4px;
    border : 1px solid #808080;
}
#TableUser td.fond_bleu {
    /* Je ne sais pas comment faire */
}


Rien de bien sorcier donc.

Cependant je n'arrive pas du tout à trouver comment obtenir le rendu des case "VOIR".
Un background-color colore toute la case et ne laisse donc pas d'espace blanc.
Ajouter une bordure épaisse ne fonctionne pas non plus car en plus d'empiéter sur les cases adjacentes en raison du border-collape, je perds le contour des cases.

Voilà, auriez-vous une idée pour m'aguiller sur ce problème ?

Merci d'avance !
Modifié par mark_nikil (19 Feb 2007 - 18:54)
Bonjour,

C'est possible mais il faudrait à mon avis le faire avec la bordure de la cellule (l'air de padding aurait la même couleur.)
Ce qui veut dire qu'il faut alors s'y prendre autrement pour marquer la séparation entre les cellules : non avec border, mais en jouant sur l'espacement entre les cellules et mettant une couleur de fond au tableau.

Problème : la propriété border-spacing n'est pas pris en charge par Internet Explorer. Solution : utiliser le bon vieil attribut "cellspacing" qui reste valide (notamment en XHTML 1.0 Strict).

D'ailleurs je trouve qu'il est intéressant d'utiliser également l'attribut border (lui aussi valide pour les tableaux), quitte à l'annuler en CSS, car il permet de garder une bonne lisibilité sans CSS.

Ça donnerait donc par exemple : 
<table cellspacing="1" border="1" summary="Description du contenu">
  <caption>Tableau de données</caption>
	<tr>
		<th>Autres infos</th>
		<th>Mentions</th>
	</tr>
	<tr>
		<td>blab bla</td>
		<td class="mentions">voir</td>
	</tr>
	<tr>
		<td>bla blas</td>
		<td class="mentions">voir</td>
	</tr>
</table>
table {
	border: 0; 	
	background: gray;
	text-align: center;
}
td, th {
	border: 0;
	padding: 5px;
	background: white;
}
td.mentions {
	background: silver;
	border: 5px solid white;
}

Modifié par Alan (26 Jan 2007 - 22:35)
Alan a écrit :
C'est possible mais il faudrait à mon avis le faire avec la bordure de la cellule (l'air de padding aurait la même couleur.)
Oui, en effet, au temps pour moi.
Merci de la réponse.

Finalement j'ai laissé tomber cette décoration de cellule, mais la proposition de Alan est intéressante.
Sujet clos
Aller à