JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<div class="innerDetails">
    <table id="nested_id" class="display" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px; background:white;">
        <thead>
            <tr>
                <th>Time</th>
                <th>Event</th>
                <th>CNAM</th>
                <th>CNUM</th>
                <th>ANI</th>
                <th>DID</th>
                <th>Exten</th>
                <th>Context</th>
                <th>AppName</th>
                <th>Channel</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test1</td>
                <td>test2</td>
                <td>test3</td>
                <td>test4</td>
                <td>test5</td>
                <td>test6</td>
                <td>test7</td>
                <td>test8</td>
                <td>test9</td>
                <td>test10</td>
            </tr>
            <tr>
                <td>test1</td>
                <td>test2</td>
                <td>test3</td>
                <td>test4</td>
                <td>test5</td>
                <td>test6</td>
                <td>test7</td>
                <td>test8</td>
                <td>test9</td>
                <td>test10</td>
            </tr>
            <tr>
                <td>test1</td>
                <td>test2</td>
                <td>test3</td>
                <td>test4</td>
                <td>test5</td>
                <td>test6</td>
                <td>test7</td>
                <td>test8</td>
                <td>test9</td>
                <td>test10</td>
            </tr>
            <tr>
                <td>test1</td>
                <td>test2</td>
                <td>test3</td>
                <td>test4</td>
                <td>test5</td>
               ...

CSS

table.display tr.odd.gradeA {
background-color: #ddffdd;
}

table.display tr.even.gradeA {
background-color: #eeffee;
}

table.display tr.odd.gradeC {
background-color: #ddddff; 
}

table.display tr.even.gradeC {
background-color: #eeeeff;
}

table.display tr.odd.gradeX {
background-color: #ffdddd;
}

table.display tr.even.gradeX {
background-color: #ffeeee;
}

table.display tr.odd.gradeU {
background-color: #ddd;
}

table.display tr.even.gradeU {
background-color: #eee;
}


tr.odd {
background-color: #E2E4FF;
}

tr.even {
background-color: white;
}

table.display#nested_id tr.even { background-color: #FFFFCC; }
table.display#nested_id tr.odd { background-color: #ffeeee; }

JavaScript

$(document).ready(function() {
   $('#nested_id').dataTable();
});