How to add alternate colors to a table body(tbody) using css?

I have a table below in html with corresponding css. The rows come from jquery function inside tbody. I want to make alternate rows in different colors. (eg. red for all even rows). I tried using nth-child(even) but since it is inside the , it applies it to all the body. I have overflow-y:auto. When I use nth-child(even), it enables the scroll-bar only for even rows, not for all tbody. How do I simply apply alternate colors using css inside the . Below is my code:

CSS:

'''

.table-fixed thead {
    width: 100%;
}

.table-fixed tbody tr:nth-child(even) {
    height: 300px;
    overflow-y: auto;
    width: 100%;
    background-color: red;
}


.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
}

.table-fixed tbody td, .table-fixed thead > tr > th {
    float: left;
    border-bottom-width: 0;
}

.table-fixed th {
    background-color: #e5e5e5;
    color: #454545;
}

'''

Html: '''

<table id="Table1" class="table table-fixed">
                        <thead>
                            <tr>
                                <th class="col-xs-1">Select</th>
                                <th class="col-xs-1" style="text-align:center;">Id</th>
                                <th class="col-xs-1" style="text-align:center;">Date</th>
                                <th class="col-xs-2" style="text-align:center;">Grade</th>
                                <th class="col-xs-7">Comments</th>
                            </tr>
                        </thead>
                        <tbody id="datagrid_tbody">
                            
                        </tbody>

'''