jQuery实现表头固定效果

HTML

<table id="yourTableID" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
	<tr>
		<th>Check out this header</th>
		<th>Look here's another one</th>
		<th>Wow, look at me!</th>
	</tr>
</thead>
<tbody>	
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
    ......
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
</tbody>	
</table>
					    

JS

$(document).ready(function(){
	$("#yourTableID").chromatable({
		width: "100%", // specify 100%, auto, or a fixed pixel amount
		height: "400px",
		scrolling: "no" // must have the jquery-1.3.2.min.js script installed to use
	});
	$("#yourTableID2").chromatable({
		width: "900px",
		height: "400px",
		scrolling: "yes"
	});
});