28173 sujets

CSS et mise en forme, CSS3

Tableau sans bordure autour

Bonjour,

Sur cette page, je cherche à faire un tableau sans bordure extérieures mais avec des bordures pour chaque cellule. La technique que j'ai trouvé est la suivante : Affecter au cellule des bordures de 1 px et cacher celles de l'extérieur en donnant au tableau une bordure blanche.


td {
border:1px solid #ddd;
}

table {
border-collapse:collapse;
border:2px solid white;/*1px ne suffit pas à cacher les bordures des td pour Firefox*/
}


Ca marche mais ça entraîne un décalage de 1px vers la gauche dans Firefox. Smiley decu

Auriez-vous une technique pour faire la même chose sans décalage ?
Sinon, existe t-il un hack CSS propre à FF pour corriger ce problème ?

Merci d'avance.
Modifié par mathmax (14 May 2007 - 21:36)
En fait, je me suis trompé sur la cause du décalage. Il est dû à la propriété border-collapse. Observez la différence de rendu de cette page entre FF et les autres navigateurs. (j'ai volontairement grossi les bordures pour mettre en évidence le décalage)

Voici le code :


<style type="text/css">
#cdr {
background-color:red;
padding-top:100px;
}

table {
border-collapse:collapse;
}

td {
border:40px solid #ddd;
}

</style>
</head>

<body>
	<div id="cdr">
		<table>
			<tr>
				<td>fg jklfgjkflg jklf gdkl</td>
				<td>fg jklfgjkflg jklf gdkl</td>
			</tr>
			<tr>
				<td>fg jklfgjkflg jklf gdkl</td>
				<td>fg jklfgjkflg jklf gdkl</td>
			</tr>
		</table>
	</div>
</body>
</html>


Savez-vous comment le corriger ?
Modifié par mathmax (15 May 2007 - 19:21)
salut,

c'est pas du css mais avec l'atribut html cellspacing tu pourrais avoir un rendu qui passe sur IE et FF je pense.
C'est vrai qu'avec cellspacing je n'ai pas de décalage sous Firefox, mais les bordures entre les cellules ne sont pas fusionnées. Elles sont simplement collées quand je met cellspacing="0" (ce qui donne des bordures 2 fois trop larges).
Le rendu de border-collapse n'est pas unifié sur les différents navigateurs. Voir par exemple ici :
http://web.covertprestige.info/test/14-interpretation-de-border-collapse.html

Si tu veux des bordures sur les cellules sauf pour le tour du tableau, il faudra probablement faire quelque chose comme ça :
table {border-spacing: 0; border-collapse: collapse ; border: none;}
td {border: solid 1px black; border-width: 0 1px 1px 0;}
td.right {border-right: none;}
tr.bottom td {border-bottom: none;}

Il faut alors placer la classe "right" sur toutes la dernière cellule de chaque ligne, et la classe "bottom" sur la dernière ligne du tableau.

On pourrait aussi travailler avec des sélecteurs CSS 2.1 non supportés par IE, ça éviterait de rajouter des classes... mais ça ne serait pas supporté par IE, donc.

Pour le fun :
table {border-spacing: 0; border-collapse: collapse ; border: none;}
td {border: solid 1px black; border-width: 1px 0 0 1px;}
tr:first-child td {border-top: none;}
td:first-child {border-left: none;}
Sujet clos
Aller à