JSFiddle - React, Tailwind, and code Playground

HTML

<h2>左を固定</h2>

		<div class="parent">
			<table class="table fixTable1">
				<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>
<h2>下部と左を固定</h2>

		<div class="parent">
			<table class="table...

CSS

th,td{padding:10px;text-align:center;}

.parent {
				height: 300px;
			}
			
			.fixTable1, .fixTable2{
				width: 1200px !important;
			}

JavaScript

(function ($) {

    $.fn.tableHeadFixer = function (param) {

        return this.each(function () {
            table.call(this);
        });

        function table() {
            /*
             This function solver z-index problem in corner cell where fix row and column at the same time,
             set corner cells z-index 1 more then other fixed cells
             */
            function setCorner() {
                var table = $(settings.table);

                if (settings.head) {
                    if (settings.left > 0) {
                        var tr = table.find("thead tr");

                        tr.each(function (k, row) {
                            solverLeftColspan(row, function (cell) {
                                $(cell).css("z-index", settings['z-index'] + 1);
                            });
                        });
                    }

                    if (settings.right > 0) {
                        var tr = table.find("thead tr");

                        tr.each(function (k, row) {
                            solveRightColspan(row, function (cell) {
                                $(cell).css("z-index", settings['z-index'] + 1);
                            });
                        });
                    }
                }

                if (settings.foot) {
                    if (settings.left > 0) {
                        var tr = table.find("tfoot tr");

                        tr.each(function (k, row) {
                            solverLeftColspan(row, function (cell) {
                                $(cell).css("z-index", settings['z-index']);
                            });
                        });
                    }

                    if (settings.right > 0) {
                        var tr = table.find("tfoot tr");

                        tr.each(function (k, row) {
                            solveRightColspan(row, function (cell) {
                                $(cell).css("z-index",...