zoukankan      html  css  js  c++  java
  • 利用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({

                "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>

  • 相关阅读:
    提醒你一下, 你真的很垃圾, 创建一个maven 的web 项目都忘记了
    java web 项目中基础技术
    java 构造函数
    分布式简介
    RabbitMq 深入了解
    JS正则表达式验证数字非常全
    mui返回上个页面并刷新数据
    Windows环境下IOS APP打包上传AppStore详细流程
    crontab 详细用法 定时任务
    Linux epoll 源码注释
  • 原文地址:https://www.cnblogs.com/TNSSTAR/p/2409223.html
Copyright © 2011-2022 走看看