css实现“固定表头带滚动条”的table
<!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的更多相关文章
- 固定表头带滚动条的HTML表格
http://blog.csdn.net/daryl715/article/details/1883677 <html> <head> </head> <BO ...
- css控制固定表头,兼容行列合并
项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏 ...
- CSS打造固定表头
html代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- html css 如何将表头固定(转)
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- html css 如何将表头固定
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
- 好用的自适应表格插件-bootstrap table (支持固定表头)
最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...
- 解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐
一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
- css 固定表头的表格,和 width:auto, margin:auto等 自计算方法
实现思路: 外层用一个table,里面写好Header,然后里面再写一个table里面写好header.然后自己控制overflow的值使内部的tablemargin-top和外层的行高一致就可以实现 ...
随机推荐
- HDU 5536 Chip Factory 字典树+贪心
给你n个数,a1....an,求(ai+aj)^ak最大的值,i不等于j不等于k 思路:先建字典树,暴力i,j每次删除他们,然后贪心找k,再恢复i,j,每次和答案取较大的,就是答案,有关异或的貌似很多 ...
- bzoj 3130 [Sdoi2013]费用流(二分,最大流)
Description Alice和Bob在图论课程上学习了最大流和最小费用最大流的相关知识. 最大流问题:给定一张有向图表示运输网络,一个源点S和一个汇点T,每条边都有最大流量.一个合法的网络 ...
- MVC 部署出现错误未能写入输出文件xxxxxxx.
编译器错误消息: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\ro ...
- The usage method of reference with bibtex in Latex【latex中参考文献的使用方法】
如何在latex中以Bibtex文件方式引用参考文献? 以IEEEtran模板为例: 1.制作bibtex参考文献库.方法如下: ①建立myreference.bib文件: ②在Google scho ...
- 数组(Array)
1. 数组(Array):相同类型数据的集合就叫做数组. 2. 数组的定义与赋值(系统会默认初始化) 普通数组: package com.li; public class Array{ public ...
- ALM11用例测试类型
默认一般都是选择的是manual
- Extjs4---Cannot read property 'addCls' of null
用MVC做后台管理系统时遇到的问题,关于tab关闭后再打开不显示,或者报错 我在新的tabpanel中加入了一个grid,当我关闭再次打开就会报错Cannot read property 'addCl ...
- Linux就是这个范儿之第一次亲密接触(3)
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责 1.4 返璞归真的命令行 有一种说法,现代计算机不是靠电力驱动,而是靠“鼠标”.多少应用程序的界面需 ...
- Cookie与Session的初探
1.Cookie 2.Session 每当一个新的请求来时,asp.net会根据浏览器有没传来SessionId(一般用Cookie传过来的,也可以用url传),来判断是新创建一个session还是根 ...
- Lambda表达式的由来
1.lambada表达式的本质:一个匿名方法,或说是匿名委托.从C#3.0开始支持,C#2.0只支持匿名方法语法很简单 : (输入参数)=>expr //当参数为一个是可以省略括号.lamb ...