I read a lot of questions about my problem, but none were really effective for my case. I have this style in the upper part of my view (I know, I'll later transfer it to the bootstrap). My goal is to make my table have alternative row shading. I don't particularly care about the colors for now, I just want the functionality.

I run the site on Mozilla and Chrome. I have refreshed 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>

I have a table with the following format:

<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 works, except for the nth-child styling. Please assist. Sorry for the code wall, I just need to point out that I have an if construction there.

When I try to inspect element, I get no reference to the tr:nth-child commands, although I get the other effects in the <style>. Please assist. Thanks in advance!

Related posts

Recent Viewed