表头表尾固定，表身滚动实现用了3个table标签

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>表头表尾固定，表身滚动</title>

     <meta charset="utf-8" />

     <style>

         *{margin:0;padding:0;}

         .container{border: 1px #ccc solid;width: 90%;margin: 100px auto;}

         .form-table{width: 100%;margin: 0 auto;text-align: center;table-layout: fixed;}

         .form-table th{border-right: 1px #ccc solid;border-bottom: 1px #ccc solid;background: #F3F3F3;}

         .form-table td{border-bottom: 1px #ccc solid;border-right: 1px #ccc solid;}

         .fixed-tfoot tr td{background: #F3F3F3;border-bottom: none;}

         .fixed-thead,.fixed-tfoot{padding-right:17px;}

         .fixed-thead tr th,.fixed-tfoot tr td{height: 50px;font-size: 16px;text-align: center;}

         .scroll-box{width: 100%;height: 300px;overflow: auto;overflow-x:hidden;}

         .scroll-box tr{width: 100%;height: 40px;line-height: 20px;}

         .scroll-box tr td{padding: 5px;}

         .scroll-box tr:nth-child(odd) td{background-color: #ECE9D8;}

         .tip{margin: 0 auto;text-align: center;color: red;line-height: 150%;font-size: 14px;}

     </style>

 </head>

 <body>

     <!--container-->

     <div class="container">

         <!--【fixed-thead表头】-->

         <table class="form-table fixed-thead" cellpadding="0" cellspacing="0">

             <tr>

                 <th>序号</th>

                 <th>姓名</th>

                 <th>性别</th>

                 <th>年龄</th>

             </tr>

         </table>

         <!--【fixed-thead表头】-->

         <!--【表身】-->

         <div class="scroll-box">

             <table class="form-table" cellpadding="0" cellspacing="0">

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

                 <tr>

                     <td>111111</td>

                     <td>张三张三张三张三</td>

                     <td>男男男男男</td>

                     <td>181818</td>

                 </tr>

             </table>

         </div>

         <!--【表身】-->

         <!--【fixed-tfoot表尾】-->

         <table class="form-table fixed-tfoot" cellpadding="0" cellspacing="0">

             <tr>

                 <td>序号</td>

                 <td>姓名</td>

                 <td>性别</td>

                 <td>年龄</td>

             </tr>

         </table>

         <!--【fixed-tfoot表尾】-->

     </div>

     <!--container-->

     <p class="tip">

         实现：table表格，表头、表尾固定；表身内容随着内容增加，出现滚动条，滚动下拉滚动条显示内容；<br />

         这个demo是通过3个table来实现。表头，表尾的table实现固定不动。中间的table外面，嵌套一层div。设置div的高度并添加overflow:auto

         来实现滚动条<br />

     </p>

 </body>

 </html>

示例演示：demo

css表格表头表尾固定，表身滚动的更多相关文章

  1. asp.net table表格表头及列固定实现

    http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...

  2. 表头表侧边固定，方法二，丫的，复制td

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. CSS样式实现表头和列固定

    效果图:第一行和第一列固定       <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...

  4. TableView之表头、表尾，区头、区尾！

    一.UITableView的UITableViewStyle 样式分为UITableViewStylePlain和UITableViewStyleGrouped两种: plain样式下区头和区尾是悬浮 ...

  5. HTML基础知识（表格、表单）

    6.表格 l  概念:表格一定具有行和列 注:使用<thead><tbody><tfoot>,使浏览器能独立于表格表头和表格页脚的表格主体滚动.当包含多个页面的表格 ...

  6. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  7. css固定表格表头(各浏览器通用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  9. Javascript 固定表格表头

    遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...

随机推荐

  1. dataTable 禁止显示信息

    $("#id").DataTable({ "info": false, // 禁止显示信息 });

  2. IIS 10.0 无法安装 URL rewrite重写模块 2.0

    打开注册表编辑器,在HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InetStp位置 把MajorVersion的值改为9之后,就可以安装了,安装完成之后,再把Major ...

  3. Windows脚本

    最近项目测试比较麻烦,要启动好几个command窗口,手敲之类的有些繁琐,于是研究了一下windows脚本,实现以下功能: 懒人吗,参数意义顺序比较懒得记,所以需要友好参数提示: 根据参数数量决定启动 ...

  4. Python创建list

    Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ['Mic ...

  5. C# 启动进程和杀死进程

    /// <summary> /// 杀死进程 /// </summary> private void KillProcesses() { var cfn = GetAppset ...

  6. win10应用安装位置修改方法

    win10应用安装位置怎么改?很多用户升级win10的系统之后,对于win10应用装置的位置如何修改一直不知道如何解决,今天,小编就跟大家一起来看看如何修改win10应用装置的位置. win10应用安 ...

  7. Linux下相关查找文件命令(find locate which whereis type)

    以下内容摘自:http://blog.csdn.net/jessica1201/article/details/8139249 标注的内容为自己的补充: 我们经常需要在系统中查找一个文件,那么在lin ...

  8. vs2015Update2的一个坑

    最近更新了vs2015到update2,然后,蛋疼的事情就来了. 首先发现QT不能用了 boost编译也出问题了 查找了2天,发现问题所在,在于windows sdk更新 10.0.10586.0 了 ...

  9. [dp]POJ2559 && HDOJ1506 Largest Rectangle in a Histogram

    题意 给n个条形的高度, 问能放的最大矩形面积 分析: 从左到右 从右到左 各搞一遍 分别记录      L[i]记录列(从前往后)标 第几列开始 可以往后放高度为a[i]的矩形  R[i]记录列(从 ...

  10. 如何用AndroidStudio导入github项目

    最近一直在研究AndroidStudio,但是总会有这样那样的问题,特别是在github上看到一个很好地开源项目,想clone下来用用,就会出现很多蛋疼的问题,今天摸索着,结合一些大牛们的建议,轻轻松 ...