表头不动，内容滚动的例子(纯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 ...
随机推荐
- Linux 信号详解四（pause，alarm）
pause函数 --将进程置为可中断睡眠状态,然后它调用内核函数schedule(),使linux进程调度器找到另一个进程来运行. --pause使调用者进程挂起,知道一个信号被捕获. alarm函数 ...
- .net 动态代理的泛型方法支持问题
最近一直在做.net平台下的高速服务框架.其中有一个问题一直困扰着我:通过动态代理RealProxy创建的服务代理,不支持泛型方法调用.比如: 接口声明: public interface IMete ...
- <实训|第十天>从底层解释一下U盘内存为什么变小的原因附数据恢复的基本原理
[root@localhost~]#序言 我们平时不论是买一个U盘硬盘,或者自己在电脑上创建一个分区,大小总是比我们创建的要小一点,有些人会说,这个正常啊,是因为厂家规定的1M=1000k,真正的是1 ...
- <实训|第六天>偷偷让新手的Linux无限重启附linux主机名称不是随便乱改的！
先说个事情:这几天我正在忙一个项目的设计,8月1号之前要弄出来,所以每天都要弄到很晚,可能更新就有点跟不上了,不过我如果有时间的话,我就更新,没时间的话,我会在8月1号之后统一更新出来,希望大家谅解! ...
- AngularJS中实现无限级联动菜单
多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- HTML5+JS 《五子飞》游戏实现（八）人机对战
要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样下起来才有意思. 当电脑用户下完棋后,电脑应立即搜索用户的棋子,然后如果没有被吃 ...
- Android开发自学笔记(Android Studio1.3.1)—2.开始第一个Android应用
一.前言 使用Android Studio开发Android应用是一件非常简单的事情,因为它会帮你自动完成很多工作.本篇我们主要完成一个单击按钮在文本框显示当前时间的简单应用,借此来演示一下 ...
- MC700 安装双系统
2011年买的MBP MC700给老婆用了一段时间后,老婆还不习惯不了Mac OS或是虚拟机,要求必须给安装windows,无奈时隔四年后,只能重新尝试在MC700上用bootcamp安装Window ...
- redis的主从复制配置
redis的主从复制配置 一. 原理 Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此下去,形成了强大的多级服务器集群架 ...