Comme aucune des solutions les mieux notées n'a fonctionné pour moi, étant donné que je travaille avec un tableau qui a un schéma de couleurs alternées, j'ai essayé beaucoup et j'ai finalement obtenu ma solution basée sur la solution fournie par @[luke flournoy].
La solution consistant à placer une bordure arrondie sur le tableau fonctionne, mais lorsque vous appliquez une couleur d'arrière-plan à une ligne du tableau ou que vous travaillez avec une tête de tableau désignée, elle écrase la configuration générale du tableau et s'affiche sous la forme d'un rectangle.
Les solutions de Luke ne ciblent que les cellules d'angle spécifiques, ce qui m'a fait penser que je devrais peut-être aussi appliquer la couleur d'arrière-plan alternée aux cellules de cette rangée et non à la rangée elle-même. L'ajout de td au tr:nth-child a fait l'affaire. Il en va de même si vous souhaitez utiliser une troisième couleur sur l'en-tête de la table. Vous pouvez le vérifier dans l'extrait de code ci-dessous.
Je n'ai pas vu d'autre solution pour travailler avec des couleurs d'arrière-plan et surtout pas avec des couleurs différentes dans un même tableau, alors j'espère que celle-ci aidera ceux qui ont besoin de plus qu'un simple tableau monochrome. Notez cette page si elle vous a aidé, afin qu'elle soit placée en haut de la page. Il y a beaucoup de réponses très pointilleuses et pas très utiles ici, alors
Voici un aperçu de mon résultat https://i.stack.imgur.com/XHOEN.png
En voici le code :
.LezzonPrize{
text-align: center;
line-height: 1.8rem;
border-collapse: collapse;
border-radius: 36px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
background-color: #FCF3C6;
}
.LezzonPrize thead th{
background-color:#FFCF5A;
}
.LezzonPrize thead th:first-child{
border-radius: 36px 0 0 0;
}
.LezzonPrize thead th:last-child{
border-radius: 0 36px 0 0;
}
.LezzonPrize th{
text-align: center;
vertical-align: middle;
line-height: 1.8rem;
font-weight: 700;
text-transform: none;
border-bottom:
2px solid #3F5A1B;
}
.LezzonPrize td:first-child{
text-align:left;
}
.LezzonPrize td{
font-size:18px;
}
.LezzonPrize tr:nth-child(2n-1) td{
background-color: #F3CF87;
}
.LezzonPrize tr:last-child td:first-child{
border-radius: 0 0 0 36px;
-moz-border-radius: 0 0 0 36px;
-webkit-border-radius: 0 0 0 36px;
}
.LezzonPrize tr:last-child td:last-child{
border-radius: 0 0 36px 0;
-moz-border-radius: 0 0 36px 0;
-webkit-border-radius: 0 0 36px 0;
}
<table class="LezzonPrize" width="100%">
<thead>
<tr>
<th width="32%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
<th width="17%">
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td colspan="5">Try deleting this to confirm that the round corners also work on the 2nth-child table rows</td>
</tr>
</tbody>
</table>
