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. ...
随机推荐
- Python调用WIN10语音交互+识别+控制+自定义对话
1 安装库文件 2修改两个地方 最简单的 # 将输入文字转化为语音信号输出 import speech while True: speech.say("请输入:") str = i ...
- Qt 编程指南 4 按钮
1按钮类的控件 逐个解释一下各个用途:(1)按压按钮 QPushButton最基本的按钮,点击该按钮通常是通知程序进行一个操作,比如弹个窗.下一步.保存.退出等等,这是经常用到的,操作系统里的对话框里 ...
- mysql索引类型-方法-形式-使用时机-不足之处--注意事项
一.索引的类型 1.普通索引 增加 create index index_name on table(colume(length)); 例子:cre ...
- node.js取参四种方法req.body,req.params,req.param,req.body
参考:https://my.oschina.net/u/2519530/blog/535309 获取请求很中的参数是每个web后台处理的必经之路,nodejs的 express框架 提供了四种方法来实 ...
- <<Linux kernel development>> Process Management
The Process On modern operating systems,processes provide two virtualizations:a virtualized processo ...
- 【Codeforces 152E】Garden
Codeforces 152 E 题意:给你一个\(n\times m\)的格子,每个格子里面有一个值\(a_{i,j}\)表示如果要将这个格子变成路的话需要花费这么多代价.现在有\(k\)个特殊格子 ...
- Linux内核访问用户空间文件:get_fs()/set_fs()的使用
测试环境:Ubuntu 14.04+Kernel 4.4.0-31 关键词:KERNEL_DS.USER_DS.get_fs().set_fs().addr_limit.access_ok. 参考代码 ...
- 关于TerraBuilder的扩展开发
熟悉Skyline的朋友,可能会发现,在最新的6.6的产品体系中,TerraBuilder中用于生成三维地形场景的模块,改成了TerrainBuilder. 通常情况下,这款软件模块,我们主要用它来进 ...
- try--catch--finally中return返回值执行的顺序
1.try块中没有抛出异常,try.catch和finally块中都有return语句 public static int NoException(){ int i=10; try{ System.o ...
- VB6 加密解密字符串
Public Function EnCodeStr(ByVal password As String) As String Dim il_bit, il_x, il_y, il_z, il_len, ...