Coins arrondis en CSS d'un tableau

[Nenex]

Slt

 

Je voudrais arrondir les coins d'un tableau en CSS, mais comme il y a conflit entre border-collapse et border-radius, j'ai mis separate a border-collapse et 0 border-spacing (solution trouve ici). Sauf que pour moi ca ne marche pas :

 

Voici mon code CSS :

table {	background-color:transparent;	padding: 3px;	margin-bottom:20px;	border-collapse:separate;	border-spacing:0px;	border: 3px solid #000;	border-radius:10px;	-moz-border-radius:10px;	-webkit-border-radius:10px;}caption {	font-size:1.5em;	color:#000;	margin-bottom:5px;	padding: 8px 0 ;	text-align:left;}th {	border: 1px solid #fff;	background-color:#000;	padding: 6px 10px;	font-size:15px;	text-align:left;	font-weight:bold;	color:#fff;}tr:nth-child(2n) {background-color:#eae8e8}tr:nth-child(2n+1) {background-color:#fff}td {	border: 1px solid #000;	padding: 6px 10px;	vertical-align:top;}

et mon code HTML :

<table> <caption>Titre du tableau (caption)</caption>	<tr>	  <th>Titre colonne (th)</th>	  <th>Titre colonne (th)</th>	  <th>Titre colonne (th)</th>	</tr>	<tr>	  <td>Supercilia labores circumfusus nimia Melanis gravissimos sui et semitas.</td>	  <td>Ad sexto ne et urbem delictis eois silentium eois Persas minimis decimo exitium.</td>	  <td>Est etiam usurpet civitas cum adliciat eos Cum haec eos qui Pyrrho probitatem quis etiam Fabrici eos qui quippe numquam duobus.</td>	</tr>	<tr>	  <td>Isauriam Persarum rege dederit nostra arma moventem saepe incursare.</td>	  <td>Discretam Iovis ipso viribus tanta instructam nullius crebra a instructam crebra aedificet.</td>	  <td>Gratiam reconciliat quod cum et universis olim maximis excipere viderem.</td>	</tr>	<tr>	  <td>Isauriam Persarum rege dederit nostra arma moventem saepe incursare.</td>	  <td>Discretam Iovis ipso viribus tanta instructam nullius crebra a instructam crebra aedificet.</td>	  <td>Gratiam reconciliat quod cum et universis olim maximis excipere viderem.</td>	</tr>	<tr>	  <td>Isauriam Persarum rege dederit nostra arma moventem saepe incursare.</td>	  <td>Discretam Iovis ipso viribus tanta instructam nullius crebra a instructam crebra aedificet.</td>	  <td>Gratiam reconciliat quod cum et universis olim maximis excipere viderem.</td>	</tr></table>

Merci d'avance pour votre aide. Modifié 20 Octobre 2015 par Nenex

[captain_torche]

Si je comprends bien, tu veux un arrondi sur les premier et dernier th, et sur le premier et dernier td du dernier tr.

Si c'est bien le cas, il faudra les spécifier spécifiquement :

http://jsfiddle.net/captain_torche/k0anu0d9/

[Nenex]

Oui c'est bien ca. En fait c'est dans le meme esprit que tr:nth-child(2n) et tr:nth-child (2n+1) que j'ai un petit peu plus haut dans mon CSS. J'avais un debut de reponse sous les yeux . Je connais pas trop ces pseudo-classe. Faut que je m'y penche dessus, mais deja je vois a quoi ca peut servir. Pour tr:nth-child(2n) et tr:nth-child (2n+1) j'avais trouve sur le net comment faire pour collorer une ligne sur 2, mais sans savoir comment ca marchait.

 

Par contre faut que je vire le border de ma table, car je ne veux pas d'espace entre le bord du tableau et le reste.

 

Merci pour ton aide

Modifié 20 Octobre 2015 par Nenex