CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paul
Paul

Reputation: 3368

Alternating colors in a table's <tr>s

I created the following fiddle to show what I am trying to do.

https://jsfiddle.net/7w3c384f/8/

As you can see my numbered list has alternating colors that I used this to do so...

        $(document).ready(function(){
          $("tr:even").css("background-color", "#606060");
          $("tr:odd").css("background-color", "#404040");
        });

This only affects the numbered list though. So, I was wanting to do the columns over to the right of it a little bit of a darker color than what the numbered list is. How can I trigger only those <tr>'s though?

Upvotes: 0

Views: 55

Answers (1)

Aakash
Aakash

Reputation: 1791

You if are looking at only css version. You can try something like this.

--EDIT---

To get the actual result add the thead and tbody tags.

<table class="draft_border_table">
    <thead>
        <tr>
            <th class="draft_table_number_th">RND</th>
            <th class="draft_table_th">User1</th>
            <th class="draft_table_th">User2</th>
            <th class="draft_table_th">User3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="draftBorder">1</div>
            </td>
            <td class="draft_table_td">Joe - A</td>
            <td class="draft_table_td">Bob - B</td>
            <td class="draft_table_td">Tom - C</td>
        </tr>
        <tr>
            <td>
                <div class="draftBorder">1</div>
            </td>
            <td class="draft_table_td">Betty - B</td>
            <td class="draft_table_td"></td>
            <td class="draft_table_td"></td>
        </tr>
    </tbody>
</table>

.draft_border_table {
    border: 3px solid #606060;
    margin: 50px 5%;
    width: 90%;
    background-color: #404040;
    border-collapse: collapse;
}
.draft_table_th {
    background-color: #606060;
    color: #FFFFFF;
    width: 14%;
    border-collapse: collapse;
    text-align: center;
    font-weight: bold;
    line-height: 2em;
}
.draft_table_number_th {
    background-color: #606060;
    color: #FFFFFF;
    width: 5%;
    border-collapse: collapse;
    text-align: center;
}

td {
    color: #FFFFFF;
    width: 14%;
    text-align: center;
    border: 1px solid black;
}
td > div {
    display: block;
    margin: 15px;
    text-align: center;
    padding: 8px;
    color: #FFFFFF;
}
tr > td{
    background-color: #404040;
}
tr:nth-child(even) > td{
    background-color: #CF000F;
}
tr:nth-child(even) > td:first-child{
    background-color: red;
}


JSFiddle

Upvotes: 1

Related Questions