façon de générer une bordure courbe autour de la table?

Question

Quelle est la meilleure façon de créer une bordure courbe autour de la table?

L'utilisation de la propriété border-radius place simplement une bordure courbe autour de la partie extérieure de la table. Cependant, les cellules individuelles génèrent une double bordure.

<table class="round" with="100%" height="200"> 
<tr> 
    <td>Text</td> 
</tr> 
</table> 

Son règlement se définit comme

.round{ 
    border: 1px solid black; 
    border-radius: 20px; 
} 

Cela vient de générer une table arrondie sans bordure autour des cellules. Si nous essayons de générer une bordure autour des cellules en mettant

.round td{ 
    border: 1px solid black; 
} 

Nous obtenons alors une double bordure.

Y a-t-il une solution de contournement? Placer un rayon de bordure sur les cellules de coin à la place.

Answer 1

.tr:first-child .td:first-child{ 
    border-top-left-radius: 20px; 
} 
.tr:first-child .td:first-child{ 
    border-top-right-radius: 20px; 
} 

.tr:last-child .td:first-child{ 
    border-bottom-left-radius: 20px; 
} 
.tr:last-child .td:first-child{ 
    border-bottom-right-radius: 20px; 
} 

Vous pouvez tamponner un peu ces cellules, en fonction du contenu. Vous aurez également besoin de préfixes de fournisseurs et peut-être d'appliquer un style avec javascript pour IE. Ou utilisez la tarte.