JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<table id="gradient-style" summary="">
		<tbody>
			<thead>
				<tr>
					<th scope="col">title</th>
					<th scope="col">title</th>
					<th scope="col">title</th>	
				</tr>
			</thead>
        <tr><td>data</td><td class="test">data</td><td class="test">data</td></tr>
        <tr><td>data</td><td>data</td><td class="test">data</td></tr>
        <tr><td class="test">data</td><td class="test">data</td><td class="test">data</td></tr>
        <tr><td class="test">data</td><td class="test">data</td><td class="test">data</td></tr>
		</tbody>
	<tfoot>
    	<tr>
        	<td colspan=3><em>testing box :)</em></td>
        </tr>
    </tfoot>
	</table>
</div>

CSS

body {
        line-height: 1.6em;
        background-color: #0E4216;
        width: 250px;
        overflow-x: scroll;
    }
    
    #gradient-style {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        font-size: 12px;
        margin: 0px;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }
    
    #gradient-style th {
        font-size: 13px;
        font-weight: normal;
        padding: 10px;
        background: #0E4216 url('table-images/gradhead.png') repeat-x;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        color: #ffffff;
    }
    
    #gradient-style td {
        padding: 8px;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        color: #00000;
        border-top: 1px solid #fff;
        background: #57935e url('table-images/gradback.png') repeat-x;
    }
    
    
    #gradient-style td {
        padding: 8px;
        border-bottom: 1px solid #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        color: #00000;
        border-top: 1px solid #fff;
        background: #00000;
    }
    
    #gradient-style tfoot tr td {
        background: #e8edff;
        font-size: 12px;
        color: #99c;
        text-align: left;
    }
    
.selected td,   #gradient-style tbody tr:hover td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x !important;
        color: #339;
    }

JavaScript

$("tr").click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass("selected");
    
});