JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<table id="tableTest" border="1" cellspacing="0">
    <thead>
        <tr>
            <td>Black Mesa</td>
            <td>Aperture Science</td>
            <td>Nerv</td>
            <td>Umbrella Corporation</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
            <td>GLaDOS</td>
            <td>Asuka Langley and Rey Ayanami</td>
            <td>Alice and Leon</td>
        </tr>
        <tr>
            <td id="one">Gordon Freeman</td>
    ...

CSS

table{
    text-align: center;

}
#tableTest{
    height: 500px;
    overflow: auto;
}
table td{
    padding: 10px;
}
.idOne, #tempResult{
    display: block;
    padding: 10px;
    background: gainsboro;
}
#tempResult div{
  background: red;
}
.aui-scrollTable{
  position: relative;
  display: block;
  overflow: auto;
}
.aui-mainRow{
  background: rgba(0,0,0,.5) !important;
  display: block !important;
  position: absolute !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}
.aui-mainRow td{
  color: red;
  box-sizing: border-box;
}

JavaScript

jQuery.fn.extend({
  fixedHead: function() {
   	var tableElement = $(this);
    var mainRow = tableElement.find('thead tr').addClass('aui-mainRow');
    var lastRowSize = mainRow.width() + mainRow.height();
    var currentRowSize = lastRowSize;
    var cellQuantity = mainRow.children().last().index()+1;
    tableElement.addClass('aui-scrollTable');
    tableElement.find('thead').prepend(mainRow.clone().removeClass('aui-mainRow').addClass('aui-cloneRow'));

    function getCloneDimensions(){
    	var dimensions = [];
    	tableElement.find('thead tr.aui-cloneRow').children().each(function(){
            var cell = $(this);
            var width = cell.outerWidth();
            var height = cell.outerHeight();
            var cellData = {
              'width':width,
              'height':height
            };
            dimensions.push(cellData);
      });
      return dimensions
    }
    function setRow(){
    
    	var dimensions = getCloneDimensions();
      
      for	(i = 0; i < dimensions.length; i++) {
      	var width = dimensions[i]['width'];
        var height = dimensions[i]['height'];
        mainRow.children().eq(i).css({
        	width:width+'px',
          height:height+'px'
        });
      }
     
    }
    setRow();
    console.log(getCloneDimensions());
    
    /*
    setInterval(function(){
    	currentRowSize = mainRow.width() + mainRow.height();
      if (lastRowSize != currentRowSize)
      {
        lastRowSize = currentRowSize;
        
      }
    });*/
  	return this
    
    /*
          tableElement.find('thead tr').children().each(function(){
            var cell = $(this);
            var text = cell.html();
            var destiny = $('#tempResult');
            var border = parseFloat(cell.css('border-width'))*2;
            var lastWidth = cell.width() + border;
            var lastHeight = cell.height() + border;
            var currentWidth = lastWidth;
            var currentHeight = lastHeight;
            var result;
  ...