JSFiddle - React, Tailwind, and code Playground

by Jeekonline

HTML

<div class="Top1 base">
    <table  class="head">
        <tr>
            <td>1
            </td>
            <td>2extra
            </td>
            <td>3
            </td>
            <td>4
            </td>
            <td>5
            </td>
            <td>6
            </td>
            <td>7
            </td>
            <td>8
            </td>
            <td>9
            </td>
            <td>10
            </td>
            <td>11
            </td>
            <td>12
            </td>
            <td>13
            </td>
            <td>14
            </td>
            <td>15
            </td>
            <td>16
            </td>
        </tr>
    </table>
</div>
<div class="Top2 base">
    <table>
        <tr>
            <td>1extra
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
            <td>5
            </td>
            <td>6
            </td>
            <td>7
            </td>
            <td>8
            </td>
            <td>9
            </td>
            <td>10
            </td>
            <td>11
            </td>
            <td>12
            </td>
            <td>13
            </td>
            <td>14
            </td>
            <td>15
            </td>
            <td>16
            </td>
        </tr>
        <tr>
            <td>1
            </td>
            <td>2
            </td>
            <td>3
            </td>
            <td>4
            </td>
            <td>5
            </td>
            <td>6
            </td>
            <td>7
            </td>
            <td>8
            </td>
            <td>9
            </td>
            <td>10
            </td>
            <td>11
            </td>
            <td>12
            </td>
            <td>13
            </td>
            <td>14
            </td>
            <td>15
            </td>
            <td>16
            </td>
        </tr>
        <tr>
            <td>1
            </td>
  ...

CSS

.base{
    width:250px;
    overflow:scroll;
    max-height:100px;
}

.Top1
{
    overflow:hidden;
    width: 230px;
    background: rgb(235,241,246);
background: -moz-linear-gradient(top,  rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,241,246,1)), color-stop(50%,rgba(171,211,238,1)), color-stop(51%,rgba(137,195,235,1)), color-stop(100%,rgba(213,235,251,1)));
background: -webkit-linear-gradient(top,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%);
background: -o-linear-gradient(top,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%);
background: -ms-linear-gradient(top,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%);
background: linear-gradient(to bottom,  rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 );
border:solid 1px #000;
}

JavaScript

var maxw = 0;
$(document).ready( function () {
			
	$('.Top2').bind('scroll', function(){
	  $(".Top1").scrollLeft($(this).scrollLeft());
	});
	
 var len = $("table.head > tbody").find("> tr:first > td").length;
 for(i=0; i<len;i++) {
    maxval(i);
	maxw = 0 ;
 }	 
	
});

	function maxval(index) {
 
		$("table").find('tr').each(function (i, el) {
				    var $tds = $(this).find('td');
					w = $tds.eq(index).width(); 
					if(w>maxw){
					maxw = w; //Get max width for the column i
					}       
		});
	   myf(maxw,index); // Set the css according to 'td'
	}

	function myf(maxw,index){
	 $("table").find('tr').each(function (i, el) {
		 var $tds =  $(this).find('td');
		 $tds.eq(index).css("padding-right", maxw- ($tds.eq(index).width()));  // patch : Is any other way?
	 });
	}