表头表尾固定，表身滚动实现用了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. jquery 100%全屏自适应宽可点击左右和焦点的自动切换幻灯片特效

    http://www.divcss5.com/css-texiao/texiao717.shtml http://d.divcss5.com/divcss5/down/2014062201.zip

  2. 一些浏览器HACKS

    1.选择器HACKS /*IE6及以下*/            *html #uno{...} /*IE7*/                    *:first-child+html #dos{ ...

  3. 创建一个cocos2d-x工程添加一个自定义Scene并显示

    #include "cocos2d.h" class RunScene :public cocos2d::CCLayer { public: virtual bool init() ...

  4. 一个月时间整理《深入浅出Node.js》

    今天终于把朴灵老师写的<深入浅出Node.js>给学习完了, 这本书不是一本简单的Node入门书籍,它没有停留在Node介绍或者框架.库的使用层面上,而是从不同的视角来揭示Node自己内在 ...

  5. opengl打开本地bmp图片绘制

    注意bmp图片的格式问题,32位ARGB  或者24位RGB.你所采用的素材一定要注意是多少位的就用多少位的.否则会显示错误的图片或者其他什么的错误. 代码如下 32位版本 #include < ...

  6. python通过webservice连接cmdbuild

    cmdbuild的部署可以查看文章:http://20988902.blog.51cto.com/805922/1541289 部署成功后,访问http://192.168.1.1:8080/cmdb ...

  7. Python的进程间通信

    进程间通讯有多种方式,包括信号,管道,消息队列,信号量,共享内存,socket等 1.共享内存 Python可以通过mmap模块实现进程之间的共享内存 mmap文件对象既像一个字符串也像一个普通文件对 ...

  8. <四> SQL存储过程

    存储过程的定义: create procedure procedurename @param1 nvarchar(30) as select * from tablename where name = ...

  9. C#解压、压缩RAR文件

    using System; using System.Collections.Generic; using System.Text; using System.IO; using Microsoft. ...

  10. Jmeter 使用笔记之 html 报告扩展（一）

    题记:在用 loadrunner 的时候可以生成一个 HTML 的报告,并且里面包含各种图表,各种详细的数据.而在使用 Jmeter 测试完后并不能直接生成 Html 的报告(无论是用 GUI 还是命 ...