JSFiddle - React, Tailwind, and code Playground

by ken tsai

HTML

<br/>
<br/>
<br/>
<br/>
<br/>
<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>
</table>

CSS

#tbl_cnt{
border-collapse: collapse; width: 100%;word-break:break-all;
}
#tbl_cnt thead, #tbl_cnt tbody{
display: block;
}
#tbl_cnt thead tr{
background-color: #8C8787; text-align: center;width:100%;display:block;
}
#tbl_cnt tbody {
height: 100px;overflow-y: auto;overflow-x: hidden;
}

.rc-handle-container {
  position: relative;
}
.rc-handle {
  position: absolute;
  width: 7px;
  /*cursor: ew-resize;*/
  cursor: col-resize;
  margin-left: -3px;
  z-index: 2;
}
table.rc-table-resizing {
  /*cursor: ew-resize;*/
   cursor: col-resize;
}
table.rc-table-resizing thead,
table.rc-table-resizing thead > th,
table.rc-table-resizing thead > th > a {
  /*cursor: ew-resize;*/
   cursor: col-resize;
}

JavaScript

var data = [
    {
    "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
    },{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
    },{
    "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
    }, {
    "status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
    },{
    "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
    }
];
   var sth = '';
   $.each(data[0], function (key, value) {
     sth += '<td>' + key + '</td>';
   });
   var stb = '';
   $.each(data, function (key, value) {
   stb += '<tr>';
   $.each(value, function (key, value) {
   stb += '<td>' + value + '</td>';
   });
   stb += '</tr>';
   });
  $('#tbl_cnt thead tr').append(sth);
  $('#tbl_cnt tbody').append(stb);
  setTimeout(function () {
  var col_cnt=0 
  $.each(data[0], function (key, value) 
         {col_cnt++;});  

var tbodyScrollWidth = $("#tbl_cnt tbody") [0].scrollWidth;
alert(tbodyScrollWidth);      
  $('#tbl_cnt thead tr').css('width', tbodyScrollWidth + 'px');
  $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');      
  }, 100)