Scroll-able table

Scrollable table with fixed top and left

by Rohit Bisht

HTML

Rows : <input type="text" name="rows" id="rows"/><br/>
Cols : <input type="text" name="cols" id="cols"/><br/>
<input type="button" value="Create Table!" id='createit' />
<div id="wrapper"></div>

CSS

.table-fixed thead {
            width: 97%;
        }
        .table-fixed tbody {
            height: 150px;
            overflow-y: auto;
            width: 100%;
        }
        .table-fixed thead,
        .table-fixed tbody,
        .table-fixed tr,
        .table-fixed td,
        .table-fixed th {
            display: block;
        }
        .table-fixed tbody td,
        .table-fixed thead>tr>th {
            float: left;
            border-bottom-width: 0;
        }
        .editableTable {
            border: solid 0px;
            width: 100%;
            text-align: center
        }
        .editableTable tbody {
            height: 100px;
        }
        .editableTable td {
            border: solid 0.5px;
            border-color: lightblue;
            width: 140px;
        }
        .selected {
            background-color: red;
            color: green;
        }
        .editableTable .cellEditing {
            padding: 0;
        }
        
        .headcol {
            position: absolute;
            width: 5em;
            left: 0;
            top: auto;
            border-right: 0px none black;
            border-top-width: 3px;
            /*only relevant for first row*/
            
            margin-top: -3px;
            /*compensate for top border*/
        }
        
        .headcol:before {
            content: 'Row ';
        }

JavaScript

var num_rows;
var num_cols;
$(document).ready(function() {
    $("#createit").click(function() {
        num_rows = document.getElementById("rows").value;
        num_cols = document.getElementById("cols").value;
        createtable(num_rows, num_cols);
    });
});
function createtable(num_rows, num_cols) {
    var theader = "<table class='editableTable' id='editableTable'><thead><tr><th class='headcol'></th>";
    for (var j = 1; j <= num_cols; j++) {
    	theader += "<td class='headcol'>"+j+"</td>";
    }
    theader += "</thead>";
    var tbody = "<tbody>";
    var temp = 1;
    for (var i = 1; i <= num_rows; i++) {
        tbody += "<tr id='row_id_" + i + "'>";
        tbody += "<th class='headcol'>"+i+"</th>";
        for (var j = 1; j <= num_cols; j++) {
            tbody += "<td id='" + temp + "' tabindex=" + temp + ">";
            tbody += temp;
            tbody += "</td>";
            temp++;
        }
        tbody += "</tr>";
    }
    var tfooter = "</tbody></table>";
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
    $('.editableTable tr').css('background-color', 'white');
    var rows = $('.editableTable tr');
    $('.editableTable tr td').focus(function() {
        tid = $(this).parent().attr('id');
        $('.editableTable td').css('background-color', 'white');
        $('.editableTable tr').css('background-color', 'white');
        $('.editableTable tr td').attr('style', "");
        var index = $(this).index();
        rows.find(':nth-child(' + (index + 1) + ')').css('background-color', '#abff96');
        tid = $(this).parent().attr('id');
        $('#' + tid).css('background-color', '#abff96');
        $(this).css('background-color', '#ffd351');
        cnum = parseFloat(this.cellIndex)+1;
        $('#row_num').text(tid+ ' '+cnum);
    });
}