<!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 5536 Chip Factory 字典树+贪心

    给你n个数,a1....an,求(ai+aj)^ak最大的值,i不等于j不等于k 思路:先建字典树,暴力i,j每次删除他们,然后贪心找k,再恢复i,j,每次和答案取较大的,就是答案,有关异或的貌似很多 ...

  2. bzoj 3130 [Sdoi2013]费用流（二分，最大流）

    Description Alice和Bob在图论课程上学习了最大流和最小费用最大流的相关知识.    最大流问题:给定一张有向图表示运输网络,一个源点S和一个汇点T,每条边都有最大流量.一个合法的网络 ...

  3. MVC 部署出现错误未能写入输出文件xxxxxxx.

    编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\ro ...

  4. The usage method of reference with bibtex in Latex【latex中参考文献的使用方法】

    如何在latex中以Bibtex文件方式引用参考文献? 以IEEEtran模板为例: 1.制作bibtex参考文献库.方法如下: ①建立myreference.bib文件: ②在Google scho ...

  5. 数组（Array）

    1. 数组(Array):相同类型数据的集合就叫做数组. 2. 数组的定义与赋值(系统会默认初始化) 普通数组: package com.li; public class Array{ public ...

  6. ALM11用例测试类型

    默认一般都是选择的是manual

  7. Extjs4---Cannot read property 'addCls' of null

    用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...

  8. Linux就是这个范儿之第一次亲密接触(3)

    原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.4 返璞归真的命令行 有一种说法,现代计算机不是靠电力驱动,而是靠“鼠标”.多少应用程序的界面需 ...

  9. Cookie与Session的初探

    1.Cookie 2.Session 每当一个新的请求来时,asp.net会根据浏览器有没传来SessionId(一般用Cookie传过来的,也可以用url传),来判断是新创建一个session还是根 ...

  10. Lambda表达式的由来

    1.lambada表达式的本质:一个匿名方法,或说是匿名委托.从C#3.0开始支持,C#2.0只支持匿名方法语法很简单 : (输入参数)=>expr   //当参数为一个是可以省略括号.lamb ...