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. ...
随机推荐
- kafka监控kafka-eagle 容器化配置
由于kafka.zk 集群已经部署在k8s中, kafka的服务名 kafka-hs, zk的服务名为:zk-cs ,对kafka进行监控,所以需要把监控部署到k8s中,选择使用kafka-eagl ...
- asp.net loading 动画
https://www.cnblogs.com/AnneHan/p/7477761.htmlhttps://blog.csdn.net/qq_33769914/article/details/7115 ...
- 老男孩Python全栈视频
链接:https://pan.baidu.com/s/1c1JOCL1w-vnYGkrhElk_GQ 密码私聊我
- mybatis逆向工程之动态web项目
有了逆向工程,单表的增删改查以及相关的实体类,还有属性注释都不用自己写了,都可以自动化生成,只需如下三步即可 逆向工程的优点是:自动化生成实体类和对应的增删改查,效率相对于之前个人开发时一个个写增删改 ...
- C#中的位的或运算的理解
如果懂位的运算,看到下面这2个程序执行的结果,会很容易理解,如果像我这样的菜鸟,刚接触开始肯定也觉得晕晕的,|= 这是什么运算符? |=就是位的或运算符,下面还是用上面的程序来讲解一下,为什么上面2个 ...
- identity一些接口
ASP.NET平台通过HttpContext对象提供一些关于用户的有用信息,该对象由Authorize注解属性使用 的,以检查当前请求的状态,考察用户是否已被认证.HttpContext.User属性 ...
- Identity(三)
本文摘自木宛城主的 ASP.NET MVC 随想录——开始使用ASP.NET Identity,初级篇 - 木宛城主 - 博客园 由于ASP.NET Membership.ASP.NET Simple ...
- React-将元素渲染到 DOM 中
首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>,在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称之为 “根” ...
- odoo订餐系统之类型设计
这次开发的模块是订餐的类型设计,比如大荤 小荤 蔬菜 米饭 等基本数据.1.设计model类,很简单就一个字段: class MyLunchProductionCategory(osv.Model): ...
- k-means+python︱scikit-learn中的KMeans聚类实现( + MiniBatchKMeans)
来源:, init='k-means++', n_init=10, max_iter=300, tol=0.0001, precompute_distances='auto', verbose=0, ...