Jquery 组 tbale表格滚动条

<!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表格滚动条的更多相关文章
- Jquery 组 tbale表格筛选
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- Jquery 组 tbale表格隔行变色
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...
- jquery.nicescroll.min.js滚动条使用方法
jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...
- jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条
jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...
随机推荐
- sizeof(自己摸索d)
Sizeof() 判断数据类型长度符的关键字 sizeof用法 sizeof(类型说明符,数组名或表达式); 或sizeof (变量名); 定义 sizeof是C/C++中的一个操作符(operato ...
- 深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlug ...
- Luogu P1525 关押罪犯
传送门 首先 这是一个并查集= = 这道题其实明白了还挺简单的qwq 思路: 因为只看仇恨值最大的一对儿,所以把他们从大到小排序,越大的就尽量分开,直到不能再分为止qwq q[x]表示x最大的敌人(x ...
- supervisor 结合 Dockerfile ENTRYPOINT
通过docker run -d 方式启动容器报“Unlinking stale socket /tmp/supervisor.sock”错误,而通过docker run -it 启动后手动执行 /u ...
- IIS 8的第一次请求不变慢如何配置
首先需要在Window中添加Application Initialization 在IIS中配置Application Pool 在IIS配置Web Site 配置完成,如果版本在7.5,可以下载:A ...
- React-引入图片的方法
方法一: import imgURL from '../../images/logo.png'; <img src={imgURL} alt="1"/> 方法二: &l ...
- linux配置iptables(3)
简单通用 web 服务器iptables 配置 *filter :INPUT DROP [0:0]:FORWARD DROP [0:0]:OUTPUT ACCEPT [0:0] #超出 链规则 的数据 ...
- Part 5:Django测试--Django从入门到精通系列教程
该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 本节将简要介绍Django的自动化测试相关内 ...
- 求组合数、求逆元、求阶乘 O(n)
在O(n)的时间内求组合数.求逆元.求阶乘.·.· #include <iostream> #include <cstdio> #define ll long long ;// ...
- Python 常用 代码片段
文件名字中含有特殊字符转成空格,因为?‘’等作为文件名是非法的.以下正则表达式进行过滤转换 newname = re.sub("[\s+\.\!\/_,$%^*(+\"\')]+| ...