<!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. HDU 5313 Bipartite Graph

    题意:给一个二分图,问想让二分图变成完全二分图最多能加多少条边. 解法:图染色+dp+bitset优化.设最终的完全二分图两部分点集为A和B,A中点个数为x,B中点个数为y,边数则为x × y,答案即 ...

  2. POJ 1039 Pipe

    题意:一根管子,中间有一些拐点,给出拐点的上坐标,下坐标为上坐标的纵坐标减1,管子不能透过光线也不能折射光线,问光线能射到最远的点的横坐标. 解法:光线射到最远处的时候一定最少经过两个拐点,枚举每两个 ...

  3. e8_4输出菲波拉契数列的前10项

    program fbnq;{输出菲波拉契数列的前10项} var a:..] of integer; i:integer; begin a[]:=; a[]:=; do a[i]:=a[i-]+a[i ...

  4. [King.yue]Ext中Grid得到选择行数据的方法总结

    (1)grid.getStore().getRange(0,store.getCount());    //得到grid所有的行 (2)grid.getSelectionModel().getSele ...

  5. CPU的ADDR2为什么跟SDRAM的0地址线接在一起

    出处:http://www.100ask.org/bbs/forum.php?mod=viewthread&tid=11544&fromuid=5490 最近看到坛子里很多初学者对于C ...

  6. REST和SOAP

    转自:http://blog.csdn.net/smstong/article/details/5312136 我感觉维基百科说的REST解释的就听明白的,摘录下来: 含状态传输(英文:Represe ...

  7. 关于C#动态调用VC Dll的方法（转）

    http://blog.csdn.net/null1/article/details/3953155

  8. Redhat Enterprise Linux 6.4图形界面的中文问题

    一.界面中文,但Windows中的中文文件名上传到linux后乱码. .bashrc文件: export LANG=zh_CN.UTF-8 /etc/sysconfig/i18n文件: LANG=&q ...

  9. openstack python sdk list tenants get token get servers

    1,openstack python sdk 获取token 获取租户tenants projects #!/bin/bash export OS_PROJECT_DOMAIN_ID=default ...

  10. iOS - Xcode升级到5.1& iOS升级到iOS7.1问题:Undefined symbols for architecture x86_64

    Xcode升级到5.1 新特性之一就是默认让所有App都通过64位编译器编译.原来在Xcode5.0.x的时候默认的Standard architectures只有(arm7,armv7s),到5.1 ...