利用jQuery创建一个表头固定的简单HTML表格。在滚动条向下滚动时,表头不变化。
利用jQuery创建一个表头固定的简单HTML表格。在滚动条向下滚动时,表头不变化。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="jquery.chromatable.js"></script>
<script>
$(document).ready(function () {
$("#yourTableID2").chromatable({
width: "900px", // specify 100%, auto, or a fixed pixel amount
height: "400px",
scrolling: "yes" // must have the jquery-1.3.2.min.js script installed to use
});
});
</script>
<table id="yourTableID2" 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>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>