JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" onclick="load_table();" > click </button>

<div id="tContainer" class="tContainer">
     <div id="tLayout"></div>
</div>

CSS

.tContainer {
    background: none repeat scroll 0 0 #FFFFFF;
    border: thin solid;
    margin-left: 1px;
}
tbody tr:nth-child(2) td{
    padding-top: 25x
}
#tableColumns {
    width: 340px;
    position: fixed;
    overflow: hidden;
    margin-top: -2px;
}

JavaScript

function load_table() { 
        var cmpLayoutDiv = document.getElementById("tLayout");
        cmpLayoutDiv.innerHTML = "";
        var colHeaderList = ['Name', 'RollNo', 'I', 'II','III', 'IV', 'V','VI', 'VII','VII', 'VIII', 'IX']
        var tableDef = "<table style='border: 1px solid #000000; border-radius: 0; margin: 12px; padding: 0; width: 350px; height:300px; box-shadow: 0; overflow : auto; display: block;'>";
    tableDef += "<tr style='border: inherit; background-color:yellow;' id='tableColumns'>";
        for (var i = 0; i < 2; i++) {
            var j = 0;
            if (i == 1) {
                j = 2;
            }
            for (; j < colHeaderList.length; j++) {
                tableDef += "<td>" + colHeaderList[j] + "</td>";
            }
        }
        tableDef += "</tr>";
        for (var i = 0; i < 55 ; i++) {
            tableDef += "<tr>";
            tableDef += "<td>"+ i +"</td>";
            tableDef += "<td>"+ i +"</td>";
            for (var j = 2; j < 12; j++) {
                tableDef += "<td>" + j + "</td>";
            }
            for (var j = 2; j < 12; j++) {
                tableDef += "<td>" + j + "</td>";
            }
            tableDef += "</tr>";
        }
        tableDef += "</table>"
        cmpLayoutDiv.innerHTML = tableDef;
}