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. ...
随机推荐
- 谈谈maven多模块
记得在校的时候,通常用的比较多是动态web工程,动态web工程导入最多就是jar包,这些jar包需要自己手动复制粘贴放入lib目录下,然后build path,有的IDE会自动build path有的 ...
- MongoDB shell 介绍
MongoDB shell 介绍 MongoDB自带javascript shell, 可在shell中使用命令行与MongoDB实列交互.shell可以执行管理操作,检查运行实列等等操作. 一:如何 ...
- ES6生成器函数generator
ES6生成器函数generator generator是ES6新增的一个特殊函数,通过 function* 声明,函数体内通过 yield 来指明函数的暂停点,该函数返回一个迭代器,并且函数执行到 y ...
- FreeRTOS创建任务
创建任务的函数如下: 第一个参数是:任务函数指针,即任务函数名. 敲黑板:创建任务和任务函数是两码事,一定要分清楚: 第二个参数是:这个参数不被FREE RTOS调用,就是辅助调试用的: 第三个参数是 ...
- java 日期与时间类
1.Date类: https://www.cnblogs.com/huangminwen/p/5994927.html 2.DateFormat和SimpleDateFormat (simple简单 ...
- Spark笔记-DataSet,DataFrame
DataSet:面向对象的,从JVM进行构建,或从其它格式进行转化 DataFrame:面向SQL查询,从多种数据源进行构建,或从其它格式进行转化 RDD DataSet DataFrame互转 1. ...
- Ubuntu16.04中搭建TFTP 和 NFS 服务器
Ubuntu 16.04中搭建TFTP服务 1. 安装 $ apt-get install tftp-hpa tftpd-hpa 2. 建立目录 $ mkdir /tftpboot # 这是建立t ...
- linux下比较两个文件:diff、 vimdiff
diff更加具体的命令,比如file1, file2 > diff -u file1 file2 > vimdiff file1 file2 vimdiff 有点类似于 vim - ...
- C#中当程序的访问权限不足时,Directory.Exists和File.Exists方法不会抛出异常报错
有些时候,我们开发的C#应用程序的执行账号,可能没有对一些文件夹和文件的访问权限,当我们使用Directory.Exists和File.Exists方法去判断这些文件夹和文件是否存在的时候,Direc ...
- Ionic Android项目Splash设置
ionic项目中,在splashscreen消失后会出现零点几秒的白屏,再出现app页面. 1. 安装Cordova splash screen插件 ionic plugin add org.apac ...