I am having an issue with a nested table in my code. I do not want the child table to have hover effects and zebra striping, but despite my efforts, it is still displaying those styles. Below is my code:
<table class='zebrastrip'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<table class='atable'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
</tr>
</table>
<style>
.atable tr:nth-child(2n-1){
background-color: #FFFFFF;
}
.atable tr:hover{
background-color: #FFFFFF;
}
.zebrastrip tr:nth-child(2n-1){
background-color: #f9f9f9;
}
.zebrastrip tr:hover{
background-color: #fce4cc;
}
</style>Any help or guidance on this issue would be greatly appreciated. Thank you!