I have come across many questions regarding my issue, but none seem to offer a solution that works for me. The problem lies with the styling in the upper section of my view (which I plan to transfer to bootstrap later on). My main objective is to implement alternate row shading in my table. At this point, I am not concerned about the specific colors, just the functionality.
The website runs on both Mozilla and Chrome browsers, and I have already tried clearing the cache.
<style>
table, th, td {
border: 2px solid gray;
border-collapse: collapse;
border-right: none;
background: white;
color: #333333; /*#333333*/
}
table {
border-left: none;
}
th {
text-align: center;
}
tr:nth-child(odd) { background:#eee; }
tr:nth-child(even) { background:#fff; }
</style>
The table structure is as follows:
<div class="tableIndex">
<table id="tableBe">
<tr>
<th></th>
</tr>
@if (Model.Count() == 0)
{
<tr>
<td colspan="25" , align="left" style="border-left:none !important">
<b>No issues match search criteria</b>
</td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td></td>
</tr>
}
}
</table>
</div>
Everything seems to be working fine, except for the nth-child styling. I would appreciate any assistance on this matter. Apologies for the lengthy code snippet, but it was necessary to highlight the presence of an if statement in the code.
When inspecting the element, I noticed that there are no references to the tr:nth-child commands, even though the other styles within the <style> tag are being applied. Any help will be greatly appreciated. Thank you in advance!