相当有用的Table Row And Col Fix方法。

JQuery.FixedTable

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.