0

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>

'''

jaco0646
  • 15,303
  • 7
  • 59
  • 83
Karan Chauhan
  • 13
  • 2

1 Answers1

2

Well base on MDN ZEBRA STYLING https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables

You can use :

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}
dylan satgalab
  • 21
  • 3
  • Thanks @dylan ...I tried this, but it adds two scrolls separately for tow children:odd and even. I cannot remove the scroll as my text is longer. – Karan Chauhan Jul 04 '20 at 17:14