Bonjour à tous,
La propriété border-radius permet d'arrondir les coins d'une DIV ou d'une cellule, par exemple.
Mais je n'arrive pas à l'appliquer à une <table> complète.
Dans le code suivant, le tableau reste parfaitement carré :
Certes cela fonctionne si on identifie les quatre coins et que l'on place la propriété radius correspondante sur chacune des cellules, mais tout serait plus simple si on pouvait l'appliquer de façon générale à la table. Est-ce possible ?
Vous allez dire que je suis un peu fainéant, mais en fait je génère mes tableaux dynamiquement, avec parfois des propriétés col-span ou row-span. Il n'est donc pas toujours facile d'identifier les coins.
Merci à vous.
La propriété border-radius permet d'arrondir les coins d'une DIV ou d'une cellule, par exemple.
Mais je n'arrive pas à l'appliquer à une <table> complète.
Dans le code suivant, le tableau reste parfaitement carré :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.Tableau { border-radius: 10px; border:1px solid #9ec3dd; padding: 10px; }
table { border-collapse: collapse; border-radius: 10px; }
td { border:1px solid #9ec3dd; }
.entete { background:#e2edf5; }
.pied { background:#eeeeee; }
</style>
</head>
<body>
<div class="Tableau">
<table>
<tr class="entete"><td>Zone T1</td><td>Zone T2</td><td>Zone T3</td></tr>
<tr class="milieu"><td>Zone C1</td><td>Zone C2</td><td>Zone C3</td></tr>
<tr class="pied" ><td>Zone P1</td><td>Zone P2</td><td>Zone P3</td></tr>
</div>
</body>
</html>
Certes cela fonctionne si on identifie les quatre coins et que l'on place la propriété radius correspondante sur chacune des cellules, mais tout serait plus simple si on pouvait l'appliquer de façon générale à la table. Est-ce possible ?
Vous allez dire que je suis un peu fainéant, mais en fait je génère mes tableaux dynamiquement, avec parfois des propriétés col-span ou row-span. Il n'est donc pas toujours facile d'identifier les coins.
Merci à vous.