表头不动，内容滚动的例子(纯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 ...
随机推荐
- 微软架构师解读Windows Server 2008 R2新特性
目前众多企业都开始为自己寻找一个更加适合自身发展的服务器操作平台.微软的Windows Server 2008 R2就是可以为大家解决服务器平台问题.微软最新的服务器平台Windows Server ...
- usb驱动开发14之设备生命线
直接看代码吧. /*-------------------------------------------------------------------*/ /** * usb_submit_urb ...
- tomcat配置文件详解
Tomcat系列之服务器的安装与配置以及各组件详解 tomcat 配置文件详解
- Ice的HelloWorld(Java)
Ice是一种面向对象的中间间平台,入门ice,简单的HelloWorld是必不可少的. 转载请注明http://www.cnblogs.com/zrtqsk/p/3745286.html,谢谢. 一. ...
- Unity 使用快速教程
Unity是微软在CodePlex上的一个开源项目,可用于依赖注入.控制反转,类似Spring,下面是使用示例: 1.先来定义几个接口.类 namespace UnityTest { public i ...
- JavaScript 总结几个提高性能知识点
前段时间花时间看了大半的<High Performance JavaScript>这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了.由于空不出时间,这个月写的学习笔记也不多,忙完最 ...
- php缓存技术（减少数据库服务器压力）
静态缓存(保存在磁盘上的静态文件,用PHP生成数据放入静态文件中) a) php操作缓存 i. 生成缓存 ii. 获取缓存 iii. 删除缓存 判断目录是否存在:is_dir() dirname ...
- 同态加密-Homomorphic encryption
同态加密(Homomorphic encryption)是一种加密形式,它允许人们对密文进行特定的代数运算得到仍然是加密的结果,将其解密所得到的结果与对明文进行同样的运算结果一样.换言之,这项技术令人 ...
- ElasticSearch入门系列（七）搜索
一.在之前,我们已经学会了如何使用elasticsearch作为一个简单的NoSql风格的分布式文件存储器--我们可以将一个JSON文档扔给Elasticsearch.也可以根据ID检索他们.但Ela ...
- 软件工程-pair work
如果用两个字来形容这次的任务,那一定是"卧槽" 结对编程人员 177 吴渊渊 193 薛亚杰 照至少一张照片, 展现两人在一起合作编程的情况. 说明结对编程的优点和缺点. 优点: ...