JSFiddle - React, Tailwind, and code Playground

by Vivekk Upadhyay

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.13/jquery.floatThead.min.js"></script>
<body>
<div class="results">
<div class="results_table">
  <table>
	<thead>
	<tr>
    	<th>COL1</th>
		<th>COL2</th>
        <th>COL3</th>
		<th>COL4</th>
        <th>COL5</th>
       <th>COL6</th>
		<th>COL7</th>
		<th>COL8</th>
       <th>COL9</th>
        <th>COL10</th>
       
        
	</tr>
   </thead>
   
   <tbody>
   <tr>
   
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   
   
   </tr>
   
   <tr>
   
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   
   
   </tr>
   
   <tr>
   
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   
   
   </tr>
   
   <tr>
   
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   
   
   </tr>
   </tbody>
   
   </table>
  </div>
  </div>
  </body>

CSS

body{
	font-family:arial;
	margin:0;
	border-top:2px solid black;
	padding-bottom:30px;
	padding-left:10px;
	padding-right:10px;
	background-color:#F9F9F9;
}

/* Results table container */
.results{
	
	padding:20px;
	border-radius: 5px;
    -webkit-box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
	box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
	padding-left:50px;
	padding-right:50px;
	width:600px;
	height:200px;
	
}

.results_table{
	overflow:auto;
	border-radius:5px;
	height:200px;
	

}

 table {
    
    border-collapse: collapse;
	font-size:12px;
	text-align:center;
	width:100%;
	table-layout:fixed;
	
}

table td {
	padding-top:30px;
	padding-bottom:30px;
	padding-right:10px;
	padding-left:10px;
	border-bottom:1px solid black;
	
}

table th {
	background:#1267B2;
	color:#fff;
	height:70px;
	width:100px;
	border-bottom:2px solid rgba(215,215,215,1.00);
	text-shadow: 1px 1px 3px #666666;
	padding:10px;
	
	
}

.results_table tbody tr:nth-child(odd) {
   background-color: #E7E7E7;
}

JavaScript

var $table = $('table');
$table.floatThead({
    scrollContainer: function($table){
        return $table.closest('.results_table');
    }
});