HTML table with fixed headers and a fixed column

http://datatables.net/examples/basic_init/scroll_xy.html

by Guillaume Seguin

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<div class="dataTables_scrollBody" style="overflow: auto; height: 200px; width: 100%;"><table id="example" class="display dataTable no-footer" cellspacing="0" role="grid" aria-describedby="example_info" style="width: 1073px;"><thead>
						<tr role="row" style="height: 0px;"><th class="sorting" aria-controls="example" rowspan="1" colspan="1" style="width: 74px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">First name</div></th><th class="sorting" aria-controls="example" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Last name</div></th><th class="sorting" aria-controls="example" rowspan="1" colspan="1" style="width: 174px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Position</div></th><th class="sorting" aria-controls="example" rowspan="1" colspan="1" style="width: 76px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Office</div></th><th class="sorting" aria-controls="example" rowspan="1" colspan="1" style="width: 27px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Age</div></th><th class="sorting" aria-controls="example" rowspan="1" colspan="1" style="width: 68px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div...

CSS

th, td { white-space: nowrap; }
    div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }

JavaScript

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollY": 200,
        "scrollX": true
    } );
} );