<!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8">

   <meta name="viewport" content="width=device-width">

   <title>固定表头</title>

   <style type="text/css">

      #table-container{

   border:1px solid black;

    width:316px;

  } 

 table{width:300px;}

 .table-header{

   padding-left:10px;

   color:white;

   background-color:grey;

  }

 .table-body{

   height:200px;

   overflow-y:scroll;

   overflow-x:hidden;

  }

 .table-body td{padding-left:15px;}

   </style>

 </head>

 <body>

 <div id="table-container">

   <div class="table-header">

     <table>

       <colgroup>

         <col style="width:80px;"/>

         <col style="width:80px;"/>

         <col style="width:80px;"/>

       </colgroup>

       <th>标题1</th>

       <th>标题2</th>

       <th>标题3</th>

     </table>

   </div>

   <div class="table-body">

     <table>

       <colgroup>

         <col style="width:80px;"/>

         <col style="width:80px;"/>

         <col style="width:80px;"/>

       </colgroup>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

       <tr>

         <td>content</td>

         <td>content</td>

         <td>content</td>

       </tr>

     </table>

   </div>

 </div>

 <body>

 </html>

有几个要点：

<HTML>部分

1.一共有三个div.最外面一个div，包裹住整张表。里面的两个div分别裹住表头和表内容。

2.注意,表格内容也都需要单独的table。表格内容应该是div-table-tr-td.

--------------------------------------------------------------

<CSS>样式部分

3.用到了<colgroup>标签。该标签只能用于table中。方便批量设定列宽;

4.表格内容table-body的div需要设置 (a) 高度;    (b) “overflow-y:scroll” 让滚动条出现；

css实现“固定表头带滚动条”的table的更多相关文章

  1. 固定表头带滚动条的HTML表格

    http://blog.csdn.net/daryl715/article/details/1883677 <html> <head> </head> <BO ...

  2. css控制固定表头，兼容行列合并

    项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏 ...

  3. CSS打造固定表头

    html代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  4. html css 如何将表头固定（转）

    html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...

  5. 固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  6. html css 如何将表头固定

    position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...

  7. 好用的自适应表格插件-bootstrap table （支持固定表头）

    最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...

  8. 解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  9. css 固定表头的表格，和 width:auto, margin:auto等 自计算方法

    实现思路: 外层用一个table,里面写好Header,然后里面再写一个table里面写好header.然后自己控制overflow的值使内部的tablemargin-top和外层的行高一致就可以实现 ...

随机推荐

  1. jQuery之属性过滤选择器

    转自:http://blog.csdn.net/woshisap/article/details/7341136 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQu ...

  2. Android_2015-04-07 Android中Intent的使用

    1. 什么是Intent 1.1 Intent是Android程序中各个组件之间进行交互的一种方式,不仅可以指明当前组件想要执行的动作,还可以在不同组件之间传递数据. Intent一般可用于启动活动, ...

  3. bzoj 1835 [ZJOI2010]base 基站选址（DP+线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1835 [题意] 有n个村庄,每个村庄位于d[i],要求建立不多于k个基站,在第i个村庄 ...

  4. MySQL在线备份与恢复工具 --> Xtrabackup

    1 Xtrabackup原理简介 xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好的替代品.  ...

  5. java继承和多态

    父类和子类 如果类C1扩展自另一个类C2,那么C1称为子类或派生类,C2称为父类或基类.派生类可以从它的基类中继承可访问的数据域和方法,还可添加新数据域和新方法 例如:实现一个几何图形基类; clas ...

  6. ACCESS-如何多数据库查询(跨库查询)

    测试通过:ACCESSselect * from F:\MYk.mdb.tablename说明:1.查询语句2.来原于哪(没有密码是个路径)3.查询的表名 ====================== ...

  7. Umbraco中Document Type取名限制

    在Umbraco中,每一个Document type都会被ModelsBuilder生成一个class,但是,有些developers发现,当你把一些Document Type命名为Grid, Pro ...

  8. 转载Entity Framework 4.1 DbContext使用记之三——如何玩转实体的属性值？

    Entity Framework 4.1 DbContext使用记之一——如何查找实体? DbSet.Find函数的使用与实现 Entity Framework 4.1 DbContext使用记之二— ...

  9. R 语言画图的基本参数

    R 语言画图的基本参数 点 点的种类 点的种类参数为 pch,每一种符号对应一个数字编号 # 点有25种,为了展示25种点 x = 1:25 y = 1:25 x ## [1] 1 2 3 4 5 6 ...

  10. 我的JS 类 写法

    长这样! var p,p1; //构造函数 function Person(name) { this.name = name; } //原型对象 var proto = { getName : fun ...