利用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>

posted @ 2012-03-21 09:23  Star★  阅读(5038)  评论(0编辑  收藏  举报