JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
	<tbody>
		<tr class="gradeX">
			<td>Trident</td>
			<td>Internet
				 Explorer 4.0</td>
			<td>Win 95+</td>
			<td class="center">4</td>
			<td class="center">X</td>
		</tr>
		<tr class="gradeC">
			<td>Trident</td>
			<td>Internet
				 Explorer 5.0</td>
			<td>Win 95+</td>
			<td class="center">5</td>
			<td class="center">C</td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>Internet
				 Explorer 5.5</td>
			<td>Win 95+</td>
			<td class="center">5.5</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>Internet
				 Explorer 6</td>
			<td>Win 98+</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td>Win XP SP2+</td>
			<td class="center">7</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 1.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.7</td>
			<td class="center">A</td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox <br>1.5</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>
			<td...

JavaScript

$(document).ready( function () 
{
	var iStart = new Date().getTime();
	var oTable = $('#example').dataTable( 
	{
		"sScrollY": "300px",
		
		"bScrollCollapse": true,
		"bPaginate": false,
        "bFilter": false
	} );
    resizeCol();
    $(window).resize(function() {
    resizeCol();
    });
} );


function resizeCol(){
    var $headers = $('#example th');
    $headers.each(function(index, el) {
        $('.dataTables_scrollHeadInner thead').width($('#example').width());
        //$('#header thead th').height($('#datatable_pagament_invisibile thead').height());
        $('.dataTables_scrollHeadInner table thead tr th').eq($headers.index(this)).width($(this).width());
    });
    console.log("ciao");
}