表头不动，内容滚动的例子(纯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 ...
随机推荐
- 【MySql】C#数据库备份与还原
public static class SQLBackup { /// <summary> /// 执行Cmd命令 /// </summary> /// <param n ...
- Visual Studio 2012 cannot identify IHttpActionResult
使用ASP.NET Web API构造基于restful风格web services,IHttpActionResult是一个很好的http结果返回接口. 然而发现在vs2012开发环境中,Syste ...
- SharePoint GroupedItemPicker Control
这个控件SharePoint用来选择Field ,和Content Type, 以下是一个完整的示例. <SharePoint:GroupedItemPicker ID="Select ...
- Implement Queue using Stacks
Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...
- 翻译qmake文档(一) qmake指南和概述
翻译qmake文档 目录 英文文档连接: http://qt-project.org/doc/qt-5/qmake-manual.html http://qt-project.org/doc/qt-5 ...
- oracle 分组排序函数
项目开发中,我们有时会碰到需要分组排序来解决问题的情况:1.要求取出按field1分组后,并在每组中按照field2排序:2.亦或更加要求取出1中已经分组排序好的前多少行的数据 这里通过一张表的示例和 ...
- 从.NET的宠物商店到Android MVC MVP
1 一些闲话 记得刚进公司的时候,我们除了做常规的Training Project外,每天还要上课,接受各种技术培训和公司业务介绍.当时第一次知道QA和SQA的区别.Training Project时 ...
- Android手机截屏
刚开始打算做一个简单的截屏程序时,以为很轻松就能搞定. 在Activity上放一个按钮,点击完成截屏操作,并将数据以图片形式保存在手机中. 动手之前,自然是看书和网上各种查资料.结果发现了解的知识越多 ...
- [BZOJ1263][SCOI2006]整数划分（数学+高精度）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1263 分析:数学老师上课讲过啦= =,就是尽可能3越多越好.然后就写个高精度就行了.
- Excel——将内容导入
1.写入Excel文件的操作引入Microsoft.Office.Tools.Excel.dll 程序集 List<Person> list = new List<Person> ...