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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM