JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<table>
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 1</th>
            <th>Title 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
        </tr>
        <tr>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
        </tr>
        <tr>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
        </tr>
        <tr>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
        </tr>
        <tr>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
        </tr>
        <tr>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
            <td>Content here</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
    border-spacing: 0;
    vertical-align: top;
    table-layout: auto;
}
table tr.hover td {
    cursor: pointer;
    background-color: rgba(30, 138, 228, 0.15);
}
table td {
    padding: 0 10px;
    line-height: 30px;
    background-color: inherit;
    color: #3c3c3c;
}
tr:nth-child(even) {
    background-color: #f0f0f0;
}
tr:nth-child(odd) {
    background-color:#fff;
}
tbody tr:hover, tbody td.hover {
    background-color: rgba(30, 138, 228, 0.15) !important;
}
td:hover {
    background-color: #fff !important;
    color: #1e8ae4;
    cursor: pointer;
}
tbody td.hover:hover,
table thead th:hover {
    background-color: #fff !important;
}
table thead th {
    background-color: #f0f0f0 !important;
    padding: 20px 10px 20px 10px;
    font-weight: bold;
    color: #3c3c3c;
    vertical-align: top;
    text-align: left;
}

JavaScript

$('table td, table th').hover(function () {
    $('table td:nth-child(' + ($(this).index() + 1) + ')').addClass('hover');
},function () {
    $('table td:nth-child(' + ($(this).index() + 1) + ')').removeClass('hover');
});