jQuery fixEm

jquery plugin to fix headers and columns in table while scrolling table vertically or horizontally

by zachpainter77

HTML

<script src="https://cdn.jsdelivr.net/gh/zachpainter77/jQuery-fixEm@master/jquery.fixEm.js"></script>
<button id="fixEm">Click to Fix EM</button><br/>
<table id="myTable">
    <thead>        
    </thead>
    <tbody>
    </tbody>
</table>

CSS

th{
    color:white;
    background-color:grey;
}

table{
    border-collapse:collapse;    
}

table, th, td {
    border: 1px solid black;
}

JavaScript

//demo code
$(function(){
    var $myTable = $('#myTable');
    $myTable.find('thead').append('<tr />');    
    for(var x = 0; x < 30; x++){
        if(x < 3){
          $myTable.find('thead tr').append('<th>fix '+x+ '</th>');   
        }
        else{
            $myTable.find('thead tr').append('<th>'+x+ '</th>');
        }
    }
    
    for(var x = 0; x < 100; x++){
        var $row = $('<tr/>');
        $row.append('<td>fixed</td>');
        $row.append('<td>row</td>');
        $row.append('<td>'+x+'</td>');
        for(var y =  3; y < 30; y++){
             $row.append('<td>'+y+'</td>');   
        }
        $myTable.find('tbody').append($row);
    }
    
    $('#fixEm').click(function(){
        $myTable.fixEm({
            'fixedColumn':true,
            'fixedHeader':true,
            'numColumns':3,
            'width':'400px'
        });
    });
});