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