JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
		<h2>TableHeadFixer Fix Left Column</h2>

		<div id="parent">
			<table id="fixTable" class="table">
				<thead>
					<tr>
						<th>Ano</th>
						<th>Jan</th>
						<th>Fev</th>
						<th>Mar</th>
						<th>Abr</th>
						<th>Maio</th>
						<th>Total</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>2012</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>550.00</td>
					</tr>
					<tr>
						<td>2012</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>550.00</td>
					</tr>
					<tr>
						<td>2012</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>550.00</td>
					</tr>
					<tr>
						<td>2012</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>550.00</td>
					</tr>
					<tr>
						<td>2012</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>110.00</td>
						<td>550.00</td>
					</tr>
				</tbody>
			</table>
		</div>

CSS

#parent {
				height: 300px;
			}
			
			#fixTable {
				width: 1800px !important;
			}

JavaScript

(function($) {

	$.fn.tableHeadFixer = function(param) {
		var defaults = {
			head: true,
			foot: false,
			left: 0,
			right: 0
		};

		var settings = $.extend({}, defaults, param);

		return this.each(function() {
			settings.table = this;
			settings.parent = $("<div></div>");
			setParent();

			if(settings.head == true)
				fixHead();

			if(settings.foot == true)
				fixFoot();

			if(settings.left > 0)
				fixLeft();

			if(settings.right > 0)
				fixRight();

			// self.setCorner();

			$(settings.parent).trigger("scroll");

			$(window).resize(function() {
				$(settings.parent).trigger("scroll");
			});
		});

		function setTable(table) {

		}


		function setParent() {
			var container = $(settings.table).parent();
			var parent = $(settings.parent);
			var table = $(settings.table);

			table.before(parent);
			parent.append(table);
			parent
				.css({
					'width' : '100%',
					'height' : container.css("height"),
					'overflow' : 'scroll',
					'max-height' : container.css("max-height"),
					'min-height' : container.css("min-height"),
					'max-width' : container.css('max-width'),
					'min-width' : container.css('min-width')
				});

			parent.scroll(function() {
				var scrollWidth = parent[0].scrollWidth;
				var clientWidth = parent[0].clientWidth;
				var scrollHeight = parent[0].scrollHeight;
				var clientHeight = parent[0].clientHeight;
				var top = parent.scrollTop();
				var left = parent.scrollLeft();

				if(settings.head)
					this.find("thead tr > *").css("top", top);

				if(settings.foot)
					this.find("tfoot tr > *").css("bottom", scrollHeight - clientHeight - top);

				if(settings.left > 0)
					settings.leftColumns.css("left", left);

				if(settings.right > 0)
					settings.rightColumns.css("right", scrollWidth - clientWidth - left);
			}.bind(table));
		}

		function fixHead () {
			var thead = $(settings.table).find("thead");
			var tr = thead.find("tr");
			var cells = thead.find("tr >...