zoukankan      html  css  js  c++  java
  • Jquery 组 tbale表格滚动条

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /* 注意将assistor和parent的大小设置为一样大*/
    .assistor {
    position: relative; /*关键点*/
    400px;
    height: 250px;
    }
    .parent {
    400px;
    height: 250px;
    overflow: auto; /*关键点*/
    }
    table{
    410px;
    text-align: center;
    overflow:auto;
    }
    .child{
    385px;
    background: #CCCCCC;
    position: absolute; /*关键点*/
    overflow: hidden;
    }
    .placeholder table{
    margin-top: 23px;
    }
    </style>
    </head>
    <body>
    <!-- 添加一层'assistor' -->
    <div class="assistor">
    <div class="parent">
    <div class="child">
    <table>
    <thead>
    <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
    </tr>
    </thead>
    </table>
    </div>
    <div class="placeholder">
    <table>
    <tbody>
    <tr><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山2</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山3</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山5</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山2</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山3</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山5</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
    </tbody>
    </table>
    </div>
    </div>
    </div>
    </body>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
    </script>
    </html>
  • 相关阅读:
    jvm client模式和server模式
    TOMCAT开启APR模式
    Spring MVC 关于controller的字符编码问题
    彻底解决Spring MVC 中文乱码 问题
    js中字符串拼接html
    分布式文件系统之MooseFS----介绍
    CopyFile函數詳解
    Delphi 接口使用中,对象生命周期管理,如何释放需要注意的问题
    年度调查 看看 2016 年 Go 语言调查结果
    Sleep(0)的作用
  • 原文地址:https://www.cnblogs.com/dianzan/p/7372777.html
Copyright © 2011-2022 走看看