Aller au contenu

Coins arrondis en CSS d'un tableau


Nenex
Aller à la solution Solutionné par captain_torche,

Sujets conseillés

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 :

1445350273.png

 

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é par Nenex
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...