表头不动，内容滚动的例子(纯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 ...
随机推荐
- Centos 7 安装jdk 配置环境变量
在Centos7 终端中,我们输入java -version可以看到java的版本,但是输入javac却没有反应 原因是系统中预装的是openjdk jre不是真正的jdk,所以还得自己装好,然后配置 ...
- OpenCV中的神器Image Watch
Image Watch是在VS2012上使用的一款OpenCV工具,能够实时显示图像和矩阵Mat的内容,跟Matlab很像,方便程序调试,相当好用.跟VS2012配合使用,简直就是一款神器!让我一下就 ...
- asp.net、 mvc session影响并发
现象:在一个网站中,当访问一个处理比较耗时的页面(A页面),页面请求还没有返回时,此时再点击访问该网站的其他页面(B页面)会出现B页面很久都没有响应和返回,直到A页面输出返回数据时才开始处理B页面的请 ...
- 仿各种APP将文章DOM转JSON并在APP中以列表显示（android、ios、php已开源）
背景 一直以来都想实现类似新闻客户端.鲜城等文章型app的正文显示,即在web editor下编辑后存为json,在app中解析json并显示正文. 网上搜过,没找到轮子.都是给的思路,然后告知是公司 ...
- NLog日志管理工具
Nlog是一个很不错的.NET日志记录组件,它可以将日志输出到控件台,保存到文本,也可以很方便的记录到数据库中,或者发送Emial到指定账户. 可以在官网 这里下载Nlog:http://nlog-p ...
- SDRAM读写一字（下）
SDRAM读写一字 SDRAM控制模块 上电后进行初始化状态,初始化完成后进入空闲状态,在此进行判断如下判断: 如果自刷新时间到,则进行自刷新操作,操作完成后重新进入空闲状态: 如果读使能有效则进行读 ...
- WinForm 程序加管理员权限
在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) 的安全机制,如果 UAC 被打开,用户即使以管理员权限登录,其应用程序默认情况下也无法对系统目录.系统注册表 ...
- java list随机打乱
java list随机打乱package arrlist; import java.util.ArrayList; import java.util.Collections; import java. ...
- BroadcastReceiver之有序广播
有序广播可以按一定的优先级进行传播 首先进行发送广播 public void click(View v){ Intent intent = new Intent(); intent.setAction ...
- redis的redis.conf文件详解
常用的: GENERAL: daemonize yes 守护进程 port 6379 指定Redis监听端口 requirepass 1 设置认证密码为1 REPLICATION: slave ...