表头表尾固定，表身滚动实现用了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. dynamic 动态获取object数据

    1.替代XXX.GetType().GetProperty("YYY").GetValue(XXX) static object GetPerson() { return new ...

  2. memcached全面剖析--4

    memcached的分布式算法   memcached的分布式 正如第1次中介绍的那样, memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能. 服务器端仅包括 第2次. 第 ...

  3. 【python】Windows安装Beautiful Soup

    环境:win10,python 3.5,Beautiful Soup 4.1   步骤1:设定python为系统环境变量,具体设置如下图,在文本后加上";C:\Python35;C:\Pyt ...

  4. ？Object-C获取手机设备信息

    一.获取UiDevice设备信息 // 获取设备名称 NSString *name = [[UIDevice currentDevice] name]; // 获取设备系统名称 NSString *s ...

  5. MVC-Model数据注解（三）-Remote验证的一个注意事项

    首先,一般来说对于一个属性的验证可能需要不止一个的远程验证,比如对于用户名来说,我们需要对于它的长度做一些限制,这个可以通过StringLength特性来解决:同时还需要验证用户名不能重复,这个就需要 ...

  6. Spring核心框架 - AOP的起源及介绍

    一.AOP技术起源 AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto Research Lab(即PARC)的研究人员就对面向对象思想的局限性进行了分析.他们研究出了一 ...

  7. jquery , find the event handler,找到jquery中的event handler

    找到 dispatch: function (e) { e = b.event.fix(e); var n, r, i, s, o, u = [], a = d.call(arguments), f ...

  8. 实时动态更新曲线图，x轴时间s随数据的变化而变化

    $(function () {    $(document).ready(function () {        Highcharts.setOptions({            global: ...

  9. asp.net 文件复制或删除用相对路径，File.Copy中用相对路径，巧用相对路径复制文件

    再复制文件 File.Copy(Server.MapPath("被复制的文件相对路径"), Server.MapPath("目的位置相对路径"), true); ...

  10. java随机生成字符串并排序

    package com.Imooc; import java.util.ArrayList; import java.util.Collections; import java.util.List; ...