I attempted using the tr:nth-child() selector but it didn't work as expected

Here is my JSP and CSS code. The JSP fetches two lists from a Java class, includes a validation if the list is empty, and then displays the values. The data-grid is a table class.

<table class="data-grid" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th colspan="6">Excesses to be actioned</th>
                </tr>
            </thead>
            <tr class="header">
                <th>Excess ID</th>
                <th>Date</th>
                <th>Client</th>
                <th>Product</th>
                <th>Amount</th>
                <th>DA</th>
            </tr>
            <tbody id="tbNa">
                <c:choose>
                    <c:when
                        test="${empty actionBean.excessList.newActiveCustomerExcessUIList}">
                        <tr>
                            <td colspan="6" align="center"><font color="red">No
                                    data available for Active Excess List</font></td>
                        </tr>
                    </c:when>
                    <c:otherwise>
                        <c:forEach
                            items="${actionBean.excessList.newActiveCustomerExcessUIList}"
                            var="customerExcess" varStatus="loop">
                            <c:set var="clientName" value="${customerExcess.clientName}"
                                scope="page"></c:set>
                            <c:set var="ultimateParent"
                                value="${customerExcess.ultimateParent}" scope="page"></c:set>
                            <c:set var="cif" value="${customerExcess.cif}" scope="page"></c:set>
                            <c:forEach items="${customerExcess.excessList}" var="excess">
                                <tr>
                                    <td><c:out value="${excess.excessId }"></c:out></td>
                                    <td><c:out value="${excess.openDate }"></c:out></td>
                                    <td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
                                                value="${clientName}"></c:out></a></td>
                                    <td><c:out value="${ultimateParent}"></c:out></td>
                                    <td><c:out value="${excess.excessAmount }"></c:out></td>
                                    <td><c:out value="${excess.excessDa}"></c:out></td>
                                </tr>
                            </c:forEach>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
                <c:choose>
                    <c:when
                        test="${empty actionBean.excessList.approvedCustomerExcessUIList}">
                        <tr>
                            <td colspan="6" align="center"><font color="red">No
                                    data available for Approved Excess List</font></td>
                        </tr>
                    </c:when>
                    <c:otherwise>
                        <c:forEach
                            items="${actionBean.excessList.approvedCustomerExcessUIList}"
                            var="customerExcess">
                            <c:set var="clientName" value="${customerExcess.clientName}"
                                scope="page"></c:set>
                            <c:set var="ultimateParent"
                                value="${customerExcess.ultimateParent}" scope="page"></c:set>
                            <c:forEach items="${customerExcess.excessList}" var="excess">
                                <tr>
                                    <td><c:out value="${excess.excessId }"></c:out></td>
                                    <td><c:out value="${excess.openDate }"></c:out></td>
                                    <td><a href="#" onclick="openClientExcessPage('${cif}');"><c:out
                                                value="${clientName}"></c:out></a></td>
                                    <td><c:out value="${ultimateParent}"></c:out></td>
                                    <td><c:out value="${excess.excessAmount }"></c:out></td>
                                    <td><c:out value="${excess.excessDa }"></c:out></td>
                                </tr>
                            </c:forEach>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
            </tbody>
        </table>

The data-grid is a table class. Below is the CSS code written for the table. I want to change the font color of the data in the even rows without changing the row color.

.data-grid {
    margin: 0px;
    padding: 0px;
    width : 60%;
    height : 40%;
    padding-top: 10%;   
    padding-left: 15%;
    white-space: nowrap;    
}

.data-grid select {
    padding: 3px 0px;
    border: 1px solid #DCDCDC;
}

.data-grid td {
    font-size: 11px;
    color: #000000;
    background-color: white;
    border: 0px;
    border-left: 1px;
    border-bottom: 1px;
    border-style: solid;
    border-color: #DBE5F1;
    padding: 5px;
}


.data-grid thead {
    color: #004080;
    font-size: 12px;
    font-weight: normal;
    border-color: #FFF;
    vertical-align: text-top;
    background-color: #C3C3C3;
    height: 20px;
    padding: 2px 5px;
}

.data-grid .header th {
    color: #002577;
    font-size: 11px;
    font-weight: bold;
    border-color: #FFF;
    text-align: center;
    vertical-align: text-top;
    background-color: #D5E0E6;
}