<!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. 如何在Qt Creator中导入图标资源

    本文主要描述如何在Qt Creator中创建资源文件,并的打入导入图标文件. 查看图标资源文件时,可以在项目的工程文件上鼠标单击右键-Open With-资源编辑器,效果如下图所示: 在项目的工程文件 ...

  2. ELF格式文件分析以及运用

    基于本文的一个实践<使用Python分析ELF文件优化Flash和Sram空间的案例>. 1.背景 ELF是Executable and Linkable Format缩写,其官方规范在& ...

  3. odoo之页面跳转

    击备注时,会由备注id带出他的内容 customer.requirement这是备注内容表 def sale_requirements_change(self, cr, uid, ids, requi ...

  4. Luogu4768 NOI2018 归程 最短路、Kruskal重构树

    传送门 题意:给出一个$N$个点.$M$条边的图,每条边有长度和海拔,$Q$组询问,每一次询问从$v$开始,经过海拔超过$p$的边所能到达的所有点中到点$1$的最短路的最小值,强制在线.$N \leq ...

  5. C# 如何物理删除有主外键约束的记录?存储过程实现

    十年河东,十年河西,莫欺少年穷 本篇主旨是如何物理删除有主外键约束的记录!那么,我们从主外键走起! 下面新建三张有主外键约束的表,分别为:系/学院表,专业班表,学生表,如下: CREATE TABLE ...

  6. EZ 2018 06 02 NOIP2018 模拟赛（十七）

    这次的比赛是真心比较狗,我TM的写了30min的树剖ZZ地直接memset超时了 话说我既然想到差分就应该去写差分的啊! 好了不过这次Rank还挺高的,终于要打进前10了当然是假的了. 好了下面开始讲 ...

  7. python 的zip 函数小例子

    In [57]: name = ('Tome','Rick','Stephon') In [58]: age = (45,23,55) In [59]: for a,n in zip (name,ag ...

  8. [SHOI2008]cactus仙人掌图[圆方树+树dp]

    题意 求仙人掌的直径(相距最远的两个点的距离). \(n\le 5\times 10^4​\) 分析 建立圆方树,讨论答案路径的 lca 在圆点还是方点. 利用树形 dp 求出每个圆点到 不同子树内圆 ...

  9. mybatis 思考

    https://my.oschina.net/xianggao/blog/548579 https://my.oschina.net/xianggao/blog/548873 https://my.o ...

  10. Notepad++列编辑

    NotePad++列编辑 工具:Notepad++使用说明:在我们的日常工作中,经常会碰到要修改多行记录,一行行去处理会非常浪费人力,这时候列编辑就是一个很好的解决方法,列编辑在进行数据批量操作时是一 ...