实现html表头固定，表格内的信息向上滚动
效果如下：
<!doctype html>Table
| header | header two |
|---|---|
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
| fuck 1 | fuck 2 |
源码如下：
<!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: 218px;
}
</style>
</head>
<body >
<table class="table">
<thead class="fixedThead">
<tr><th>header</th><th>header two</th></tr>
</thead>
<tbody class="scrollTbody">
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
<tr><td>fuck 1</td><td>fuck 2</td></tr>
</tbody>
</table>
</body>
</html>
实现html表头固定，表格内的信息向上滚动的更多相关文章
- Javascript 固定表格表头
遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...
- css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- DataTables固定表格宽度（设置横向滚动条）
当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...
- html css 如何将表头固定（转）
html css 如何将表头固定 position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时 ...
- html Table实现表头固定
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...
- 纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
- easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
- html css 如何将表头固定
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
随机推荐
- centos 6.9 编译安装 Nginx1.12.1
centos 6.9 使用yum 安装 Nginx1.12.1 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由伊戈 ...
- CentOS7如何使用U盘安装
前段时间给一台没有光驱的PC安装CentOS7(CentOS-7.0-1406-x86_64-DVD.iso),惯例直接用Universal-USB-Installer直接转换镜像至U盘,顺利启动,却 ...
- 一、任天堂ns （Nintendo Switch） 上手
公司不方便回家详解做个博客非专业评测~
- 请求SQL数据是存在<null>，的解决方法
删除字典中的null 我们在处理服务器传过来的数据过程中,如果数据中出现null,我们是没法进行本地持久化处理的.在使用NSUserDaults保存本地时,如果其中一个字段的value为NULL值,就 ...
- jquery基础研究学习【效果】
---------------------------------分割线-------------------------------------- 2017年6月7日18:16:35Query 效果 ...
- Root（hdu5777+扩展欧几里得+原根）
Root Time Limit: 30000/1500 ...
- uitableview滚动到最后一行
本文转载至 http://mrjeye.iteye.com/blog/1278521 - (void)scrollTableToFoot:(BOOL)animated { NSInteger s = ...
- ubuntu16.04下hive安装与配置
Hive是什么? 由Facebook开源用于解决海量 结构化日志的数据统计: Hive是基于Hadoop的一个 数据仓库工具,可以将结构化的数据文件映射 成一张表,并提供类SQL查询功能: 构建在Ha ...
- XmlDocument.selectNodes() and selectSingleNode()的xpath的学习资料
Xpath网页: http://www.w3school.com.cn/xpath/xpath_syntax.asp XDocument.parse(string)类似于XmlDocument.loa ...
- python的进程和线程
关于进程: An executing instance of a program is called a process.程序的执行实例称为进程. Each process provides the ...