jQuery.FixedTable is a jQuery plugin to create a fixed header and columns on a HTML
table. The idea is from https://www.open2space.com/projects/fixedtable. We have
improved it, and fixed some bugs.
Feature
- Allow horizontal and vertical scroll.
- Support multiple HTML tables in one page.
- The number of fixed columns can be customize.
- The background colors of each row when mouse is over and out can be customized.
Files
Demo ,
Download: Source Code
Usage
To make a fixed table, you need to some javascript code and a <table> with
the <thead> and <tfoot> in your page, and set the elements' class.
e.g.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fixedtable.js"></script>
<script type="text/javascript">
// this "tableDiv" must be the table's class
$(".tableDiv").each(function() {
var Id = $(this).get(0).id;
var maintbheight = 555;
var maintbwidth = 911;
$("#" + Id + " .FixedTables").fixedTable({
width: maintbwidth,
height: maintbheight,
fixedColumns: 1,
// header style
classHeader: "fixedHead",
// footer style
classFooter: "fixedFoot",
// fixed column on the left
classColumn: "fixedColumn",
// the width of fixed column on the left
fixedColumnWidth: 150,
// table's parent div's id
outerId: Id,
// tds' in content area default background color
Contentbackcolor: "#FFFFFF",
// tds' in content area background color while hover.
Contenthovercolor: "#99CCFF",
// tds' in fixed column default background color
fixedColumnbackcolor:"#187BAF",
// tds' in fixed column background color while hover.
fixedColumnhovercolor:"#99CCFF"
});
});
</script>
<div id="tableDiv_Arrays" class="tableDiv">
<table id="Open_Text_Arrays" class="FixedTables">
<thead>
<tr>
<th>
Purpose
</th>
<th>
C#
</th>
<th>
Php4
<th>
<th>
Php5
</th>
<th>
ActionScript
</th>
<th>
JavaScript
</th>
<th>
Ruby
</th>
</tr>
<thead>
<tbody>
<tr>
<th>
data1
</th>
<th>
data2
</th>
<th>
data3
<th>
<th>
data4
</th>
<th>
data5
</th>
<th>
data6
</th>
<th>
data7
</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Purpose
</th>
<th>
C#
</th>
<th>
Php4
<th>
<th>
Php5
</th>
<th>
ActionScript
</th>
<th>
JavaScript
</th>
<th>
Ruby
</th>
</tr>
</tfoot>
</table>
</div>
note: if you do not need the footer, just remove the <tfoot> in your html
code.