<!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. 【JMeter】JMeter在linux下运行

    之前在用JMeter做性能测试时基本都用自己的笔记本电脑. 考虑到网络传输和占用系统资源情况时进行了以下分析: 1 在笔记本上,开始-cmd "ping 服务器",得到传输时间.在 ...

  2. DNS(一)简介

    最近学习相关DNS知识,顺便总结下相关内容. 1.什么是DNS DNS(Domain Name System)服务,可以使用域名代替复杂的IP地址来访问网络服务器,使得网络服务的访问更加简单,而且可以 ...

  3. 问题：关于贴友一个用js传递value默认值的简单实现

    需求和代码如下: “这是我的代码:” 1: <input type="text" id="price2" value="333"/&g ...

  4. KNN及其改进算法的python实现

    一. 马氏距离 我们熟悉的欧氏距离虽然很有用,但也有明显的缺点.它将样品的不同属性(即各指标或各变量)之间的差别等同看待,这一点有时不能满足实际要求.例如,在教育研究中,经常遇到对人的分析和判别,个体 ...

  5. ADB Server Didn’t ACK ,failed to Start Daemon 解决方法

    解决方法如下: 1.adb nodaemon server 查看不能执行的原因,输出: cannot bind ‘tcp:5037’ 2.定位到了是端口的问题!是5037端口被占用了! 3.netst ...

  6. cocos2d-x3.0+Eclipse配置说明

    假如我们已经装了JavaJDK.Cygwin,也解压了2013-08-27之后最新的AndroidSDK,其实最新的AndroidSDK已经集成了eclipse,eclipse里面已经配置好了Andr ...

  7. Hadoop概念学习系列之分布式文件系统（三十）

    ===============> 数据量越来越多,在一个操作系统管辖的范围存下不了,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,因此迫切需要一种系统来管理多台机器上的文件,这就 ...

  8. Java之序列流SequenceInputStream

    序列流:作用就是将多个读取流合并成一个读取流,实现数据的合并 序列流表示其他输入流的逻辑串联.它从输入流的有序集合开始,并从第一个输入流开始读取,直到文件的末尾,接着从第二个输入流读取,以此类推:这样 ...

  9. Objective-C Runtime 运行时之三：方法与消息

    基础数据类型 SEL SEL又叫选择器,是表示一个方法的selector的指针,其定义如下: typedef struct objc_selector *SEL; objc_selector结构体的详 ...

  10. 高级C++开发工程师综合测试题（风林火山）

    题目要求:代码要求能够直接编译运行 1.       请实现一个函数:凑14:输入很多个整数(1<=数值<=13),任意两个数相加等于14就可以从数组中删除这两个数,求剩余数(按由小到大排 ...