JSFiddle - React, Tailwind, and code Playground

by Sergey Kharchishin

HTML

<div id="table-listing">
<div class="table-scrollable">
    <table class="table" data-count-fixed-columns="2" cellpadding="0" cellspacing="0">
        <thead class="header">
            <tr>
                <th>Month</th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
                <th>Item 5</th>
                <th>Item 6</th>
                <th>Item 7</th>
                <th>Item 8</th>
            </tr>
        </thead>
        <tbody class="results">
            <tr>
                <td>Jan</td>
                <td>3163asdasd</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <td>Feb</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <td>Mar</td>
                <td>3163 some long text</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <td>Apr</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>    
                <td>May</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
               ...

CSS

#table-listing{
  width: 300px;  
}
.table-scrollable {
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    margin: 10px 0 ;
}  

.table th{
  white-space:nowrap;
}
.table td{
  vertical-align:top;
  border-bottom: 1px solid #ddd;
  padding: 2px 5px;  
}

JavaScript

function app_handle_listing_horisontal_scroll(listing_obj)
{
  //get table object   
  table_obj = $('.table',listing_obj);
  
  //get count fixed collumns params
  count_fixed_collumns = table_obj.attr('data-count-fixed-columns')
             
  if(count_fixed_collumns>0)
  {
    //get wrapper object
    wrapper_obj = $('.table-scrollable',listing_obj);
    
    wrapper_left_margin = 0;
    
    table_collumns_width = new Array();    
    table_collumns_margin = new Array();
    
    //calculate wrapper margin and fixed column width
    $('th',table_obj).each(function(index){
       if(index<count_fixed_collumns)
       {
         wrapper_left_margin += $(this).outerWidth();
         table_collumns_width[index] = $(this).outerWidth();
       }
    })
    
    //calcualte margin for each column  
    $.each( table_collumns_width, function( key, value ) {
      if(key==0)
      {
        table_collumns_margin[key] = wrapper_left_margin;
      }
      else
      {
        next_margin = 0;
        $.each( table_collumns_width, function( key_next, value_next ) {
          if(key_next<key)
          {
            next_margin += value_next;
          }
        });
        
        table_collumns_margin[key] = wrapper_left_margin-next_margin;
      }
    });
     
    //set wrapper margin               
    if(wrapper_left_margin>0)
    {
      wrapper_obj.css('cssText','margin-left:'+wrapper_left_margin+'px !important; width: auto')
    }
    
    //set position for fixed columns
    $('tr',table_obj).each(function(){  
      
      //get current row height
      current_row_height = $(this).outerHeight();
           
      $('th,td',$(this)).each(function(index){
         
         //set row height for all cells
         $(this).css('height',current_row_height)
         
         //set position 
         if(index<count_fixed_collumns)
         {                       
           $(this).css('position','absolute')
                 ...