<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 注意将assistor和parent的大小设置为一样大*/
.assistor {
position: relative; /*关键点*/
width: 400px;
height: 250px;
}
.parent {
width: 400px;
height: 250px;
overflow: auto; /*关键点*/
}
table{
width: 410px;
text-align: center;
overflow:auto;
}
.child{
width: 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>

Jquery 组 tbale表格滚动条的更多相关文章

  1. Jquery 组 tbale表格筛选

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  2. Jquery 组 tbale表格隔行变色

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  3. jquery隐藏table表格的某一列

    jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列

  4. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  5. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  6. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  7. 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...

  8. jquery.nicescroll.min.js滚动条使用方法

    jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...

  9. jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条

    jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...

随机推荐

  1. Spring与SpringMVC的区别

    Spring是IOC和AOP的容器框架,SpringMVC是基于Spring功能之上添加的Web框架,想用SpringMVC必须先依赖Spring. 简单点的话可以将SpringMVC类比于Strut ...

  2. Ubuntu sudo apt-get 安装下载更新软件包命令详解

    sudo apt-get install package                    安装软件包sudo apt-get install package - - reinstall 重新安装 ...

  3. AI 朴素贝叶斯分类

    1.条件概率 P(A|B)表示在事件B已经发生的条件下,事件A发生的概率.计算公式:P(A|B)=P(AB)/P(B). 2.相互独立事件 对于相互独立事件A和B,它们发生的概率互不影响,P(AB)= ...

  4. EasyUI panel

    1.脚本生成panel 2.panel属性 3.panel事件 4.panel方法 一 脚本生成panel <div id="tt"></div> < ...

  5. 【Codeforces 464D】World of Darkraft - 2

    Codeforces 464 D 首先我们知道这K个装备是互不干扰的,就是说如果一个装备升级了或者卖掉了,不会对其它装备的挣到的钱产生任何影响.所以我们就考虑单独处理某一个装备挣到的钱. 那么就设\( ...

  6. Luogu P3372 【模板】线段树 1

    qwq #include<cstdio> using namespace std; ; int n,m,x,y,flag; *maxn],r[*maxn]; *maxn],sum[*max ...

  7. JAVA 8的新特性

    1.Lambda表达式:允许把函数作为一个方法的参数 Lambda的优点: 1)简洁 2)非常容易并行计算 3)可能代表未来编程趋势 Lambda的缺点: 1)若不要并行计算,很多时候计算速度没有传统 ...

  8. [05] 动态SQL

    MyBatis的强大特性之一就是它的动态SQL,它可以根据不同的条件动态地组成SQL语句进行执行.为此,MyBatis提供了一系列强大的表达式,本章将就此进行学习,主要内容直接参考的是官方文档< ...

  9. PHPStorm FTP upload could not change to work directory 无法更改目录

    使用PHPStorm 2016 2.2版本 设置代码及时上传的时候遇到了这个问题,无法上传代码. 配置好了FTP之后去测试,是正常的,如下图一所示,也开启了那个被动模式(见图二),但是去上传代码的时候 ...

  10. Linux系列教程(七)——Linux常用命令之帮助和用户管理命令

    上篇博客我们介绍了Linux文件搜索命令,其中find是用的最多的也是功能最强大的文件或目录搜索命令,和另一个搜索命令locate的区别是,find命令是全盘搜索,刚创建的文件也能搜索的到,而loca ...