表格颜色的交替 <tr> s

Question

我创建了以下小提琴以显示我要执行的操作。

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

如您所见，我的编号列表具有交替的颜色，我用它来做到这一点...

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

但是，这只会影响编号列表。 因此，我想在其右侧的列上添加一些比编号列表更深的颜色。 我如何只触发那些<tr>呢？

Answer 1

您如果只查看CSS版本。 您可以尝试这样。

- 编辑 - -

要获得实际结果，请添加thead和tbody标签。

<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