JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<table>
    <th>Header 1</th><th>Header 2</th><th>Header 3</th>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
</table>
<table>
    <th>Header 1</th><th>Header 2</th><th>Header 3</th>
    <tr class="rowodd"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr class="roweven"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr class="rowodd"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr class="roweven"><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
</table>
<table class="withCSS3">
    <th>Header 1</th><th>Header 2</th><th>Header 3</th>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

CSS

table {
 margin: 5px;
 border:1px solid #26445F;
 font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;    
 cursor: default;
}
th {
 text-align: center;
 background-color: #45719B;
 color: white;
 font-weight: bold;
 font-size: 9pt;
 padding: 3px;
}
td {
 padding: 2px;
 font-size: 8pt;
 border-bottom: 1px dotted #222;
 border-right: 1px dotted #222;
}
/* First table */
.highlight { background-color: #D9EFFF; }
/* Second table */
.rowodd { background-color: #E5F4FF; }
.rowodd-active { background-color: #D9EFFF; }
.roweven { background-color:#CEDCE5; }
.roweven-active { background-color: #C3D8E5; }
/* Third table ( only CSS3 ) */
.withCSS3 tr:nth-child(even) { background-color:#CEDCE5; }
.withCSS3 tr:nth-child(even):hover { background-color:#C3D8E5; }
.withCSS3 tr:nth-child(odd) { background-color:#E5F4FF; }
.withCSS3 tr:nth-child(odd):hover { background-color:#D9EFFF; }

JavaScript

(function($){

    $("table:eq(0) tr:has(td)")
        .on("mouseenter", function(){
            $(this).addClass("highlight");
        })
        .on("mouseleave",function(){
            $(this).removeClass("highlight");
        });

    $(".rowodd")
        .on("mouseenter", function(){
            $(this).removeClass("rowodd").addClass("rowodd-active");
        })
        .on("mouseleave",function(){
            $(this).removeClass("rowodd-active").addClass("rowodd");
        });

    $(".roweven")
        .on("mouseenter", function(){
            $(this).removeClass("roweven").addClass("roweven-active");
        })
        .on("mouseleave",function(){
            $(this).removeClass("roweven-active").addClass("roweven");
        });

})(jQuery);