JSFiddle - React, Tailwind, and code Playground

HTML

<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;
}

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++;});    
  $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth) + 'px');
  $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');      
  }, 100)