Zebra Striped Tables using jQuery

 $(document).ready(function () {

        $("#agTable tr:nth-child(even)").addClass("alternateRow");
        $("#agTable tr:nth-child(odd)").addClass("normalRow");


});






<style>
   table {
        border-collapse: collapse;
    }
   th{
       font-size: x-small;
   }
    table, td, th {
        border: 1px solid black;
    }

    tr.alternateRow td {
        background: #EEE;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 3px;
    }

    tr.normalRow td {
        background: #FFF;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 3px;
    }


</style>

Scrollable Table with Fixed Headers

Using HTML5, the CSS for this is straight-forward, but the problem is the widths of the cols then get all messed up.

So first make sure to use HTML5 table markup:

<table>
<thead>
<tr>
<th>
<th>
</tr>
</thead>
<tbody>
<tr>
<td>
<td>
</tr>
</tbody>
</table>

Then use the following CSS:

<style>
  table tbody, table thead {
        display: block;
    }

    table tbody {
        overflow: auto;
        height: 200px;
    }
</style>