Using DataTables to fix header columns and rows in HTML

So I tried to recreate functionality on Data Tables where the first column and first row of an HTML table are fixed. http://datatables.net/release-datatables/extras/FixedHeader/zIndexes.htmlHowever, if you play with the example I coded up: http://joelin.org/work/Navigation/ , you'll see the leftmost column isn't formed correctly (the first element in the table header is too short).What might be going on? The code looks something like this:\[code\]<!DOCTYPE html><html><head> <script type="text/javascript" src="http://stackoverflow.com/questions/15537090/js/jquery-min.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15537090/js/jquery.dataTables.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15537090/js/FixedHeader.min.js"></script> <style> td,th { background-color:white; border:black 1px solid; } </style> <script> $(document).ready(function () { var myTable = $('#jsonDataTable').dataTable( { }); new FixedHeader(myTable, {"left": true, "zLeft": 105}); }); </script></head><body> <div id="tableContainer"><table id="jsonDataTable"... </table></div></head>\[/code\]
 
Back
Top