<!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. android利用WebView实现浏览器的封装

    android提供了封装浏览器的接口,可以让开发者利用自己的view显示网页内容.今天又实现研究了一下,利用WebView显示浏览器内容,还可以利用 WebViewClient显示自己需要的内容. 参 ...

  2. 27、Service

    1服务可以通过startservice的方法 开启.通过stopservice的方法 停止. 服务有一个特点: 只会一次onCreate()方法一旦被创建出来,以后oncreate() 就不会再被执行 ...

  3. Java String StringBuffer StringBuilder

    String  字符串常量存储在常量区,每次追加操作会创建新的对象: StringBuffer  字符串变量  线程安全 在堆上创建,每次追加操作在原对象上进行操作:  速度 StringBuffer ...

  4. 2015年10月23日JS笔记

    ECMAScript标准:JavaScript核心语法 微软:Jscript ECMAScript标准:一纸空文 JavaScript和JScritp都号称完全实现了 ECMAScript标准 W3C ...

  5. Leetcode OJ : Evaluate Reverse Polish Notation Stack C++ solution

    #define ADDITION '+' #define SUBSTRACTION '-' #define MULTIPLICATION '*' #define DIVISION '/' class ...

  6. Linux内核，文件系统移植过程中出现的一些问题与解决办法

    1.bootm地址和load address一样 此种情况下,bootm不会对uImage header后的zImage进行memory move的动作,而会直接go到entry point开始执行. ...

  7. 系统时间不一致导致memcached的session不共享

    测试服务器需要做负载均衡,采用的是Nginx+Tomcat. 负载均衡配置成功之后,采用memcached配置session同步.总共4台服务器,三台服务器很顺利的配置成功,最后一台服务器死活不能共享 ...

  8. AndroidManifest笔记

    1.android:configChanges如果配置了这个值,比如"orientation",在屏幕旋转时会调用Activity的onConfigurationChanged,而 ...

  9. [iOS基础控件 - 4.2] APP列表 字典转模型Model

    A.使用字典加载数据的缺点 1.用户自行指定key,容易出错 2.存入.取出都需要key,容易混乱   B.模型 (MVC中的model) 1.字典与模型对比: (1)字典:存储数据,通过字符串类型的 ...

  10. Android 图片加载[常见开源项目汇总]

    该文主要是讲一下目前有哪些使用比较多的 图片加载开源项目,并简单介绍该如果使用 以及各开源项目之间有什么区别, 我们该如何去选择适合的开源项目应用到我们的项目中? 一.Android-Universa ...