Jump to content
Nenex

Coins arrondis en CSS d'un tableau

Rate this topic

Recommended Posts

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. Edited by Nenex

Share this post


Link to post
Share on other sites

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 rolleyes.gif . 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 thumbup.gif


Edited by Nenex
  • Upvote 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...