JSFiddle - React, Tailwind, and code Playground
HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript" src=
"http://datatables.net/download/build/jquery.dataTables.min.js">
</script>
<script type="text/javascript" src=
"http://datatables.net/download/build/FixedColumns.min.js">
</script>
<style type="text/css">
<!-- th,td { white-space: nowrap; } -->
</style>
<title></title>
</head>
<body>
<form name="MyForm" method="post" action="" id="MyForm">
<!-- static size header junk--><!-- static size header junk-->
<!-- static size header junk-->
<table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="35%" align="left">header junk left</td>
<td>- HEADER JUNK MIDDLE -</td>
<td width="35%" align="right">header junk right</td>
</tr>
</table>
<table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
<tr>
<td width="60%" align="left">header junk left</td>
<td width="40%" align="right">check it out! <input type="checkbox" onchange=
"alert('your javascript here');" value="Y" name="checkitout" /></td>
</tr>
</table>
<!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->
<table border="1" width="95%" cellspacing="1" cellpadding="0" align="center" id="bigtable">
<thead>
<tr>
<th scope="col">fixed can be long<br />or short</th>
<th scope="col" colspan="4">scroll A</th>
<th scope="col" colspan="2">scroll B</th>
<th scope="col">scroll C</th>
<th scope="col" colspan="4">scroll D</th>
<th scope="col" colspan="2">scroll E</th>
<th...
JavaScript
$(document).ready(function() {
var oTable = $('#bigtable').dataTable({
"sScrollY": "300px",
"sScrollX": "100%",
"bPaginate": false,
"bFilter": false
});
new FixedColumns(oTable);
});