表头不动，内容滚动的例子(纯css+html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<style type="text/css">
.table{
width: 100%;
border-collapse:collapse;
border-spacing:0;
}
.fixedThead{
display: block;
width: 100%;
}
.scrollTbody{
display: block;
height: 262px;
overflow: auto;
width: 100%;
}
.table td,.table th {
width: 200px;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
.table tr{
border-left: 1px solid #EB8;
border-bottom: 1px solid #B74;
}
thead.fixedThead tr th:last-child {
color:#FF0000;
width: 200px;
}
td{
word-wrap:break-word;
word-break:break-all;
}
</style>
</head>
<body >
<table class="table">
<thead class="fixedThead">
<tr><th>header</th><th>header two</th></tr>
</thead>
<tbody class="scrollTbody">
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
<tr><td>test 1</td><td>test 2</td></tr>
</tbody>
</table>
</body>
</html>
表头不动，内容滚动的例子(纯css+html)的更多相关文章
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- Table实现表头固定 内容滚动
<div style="width: 800px;"> <div class="table-head"> <table> & ...
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用纯 CSS 实现滚动阴影效果
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- 不可思议的纯 CSS 滚动进度条效果
结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...
- 一、纯css实现顶部进度条随滚动条滚动
一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Java手动添加SSL证书
出现错误为 SSLHandshakeException - unable to find valid certification path to requested target 在服务器上找到对应的 ...
- PAT 1019. 数字黑洞 (20)
给定任一个各位数字不完全相同的4位正整数,如果我们先把4个数字按非递增排序,再按非递减排序,然后用第1个数字减第2个数字,将得到一个新的数字.一直重复这样做,我们很快会停在有"数字黑洞&qu ...
- 机械大楼电梯控制项目软件 -- github团队组建
目前在Github网站上建立了机械大楼电梯控制项目软件的软件仓库(Repository),提供了软件功能需求说明文档和Automation Studio程序模板.地址为 https://github. ...
- Theano2.1.11-基础知识之稀疏
来自:http://deeplearning.net/software/theano/tutorial/sparse.html sparse 通常来说,稀疏矩阵可以和常规矩阵一样提供相同的功能.两者不 ...
- CUDA2.1-原理之索引与warp
本小节来自<大规模并行处理器编程实战>第四节,该书是很好的从内部原理结构上来讲述了CUDA的,对于理解CUDA很有帮助,借以博客的形式去繁取间,肯定会加入自己个人理解,所以有错误之处还望指 ...
- ASP.NET的编译原理
http://www.cnblogs.com/mdy2001212/archive/2008/01/31/1060345.html
- [BZOJ3875][AHOI2014]骑士游戏（松弛操作）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3875 分析: 类似于spfa求最短路,设d[i]表示完全消灭i号怪物的最小花费,我们对 ...
- 维特比算法（Viterbi Algorithm）
寻找最可能的隐藏状态序列(Finding most probable sequence of hidden states) 对于一个特殊的隐马尔科夫模型(HMM)及一个相应的观察序列,我们常常希望 ...
- MATLAB中plot()画图的颜色线型和希腊字母参数设置
y 黄色 · 点线 m 粉红 ○ 圈线 c ...
- JavaScript学习笔记- 正则表达式常用验证
<div> <h1>一.判断中国邮政编码匹配</h1> <p>分析:中国邮政编码都是6位,且为纯数字</p> <div>邮政编码 ...