实现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时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
随机推荐
- 昂贵的聘礼 - poj 1062 (Dijkstra+枚举)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 39976 Accepted: 11596 Description 年 ...
- org.hibernate.type.SerializationException: could not deserialize 反序列化失败
1.查看实体类有没有实现Serializable接口 例:public class Student implements Serializable { ***** } 2.看表中的字段有没有在实体中进 ...
- Gradle 构建工具
参考文章: 作者:ghui 链接:https://www.zhihu.com/question/30432152/answer/48239946 来源:知乎 著作权归作者所有.商业转载请联系作者获得授 ...
- Mysql 复制表数据（表结构相同）
[1]Mysql 复制表数据(表结构相同) -- 方式一: create table table_name_dest as select * from table_name_src; -- 方式二: ...
- wireshark:Couldn't run /usr/bin/dumpcap in child process: Permission denied
When start wireshark, I met an error like: 引用 Couldn't run /usr/bin/dumpcap in child process: Permis ...
- 我为什么要学习jquery
因为jquery很强大,很少的代码实现更多的功能.
- C语言中的指针运算
int a[5]={1,2,3 ,4,5} *p=a; *p++ 等价于*(p++) 等价于a[i++](i++ i首先会被使用任何进行自+) *++p等价于*(++p) 等价于 a[++i] (++ ...
- 网络编程------socketserver模块以及socket模块的更多用法.
socketserver模块 内置模块 (其实现原理为并发) socketserver这个模块主要是为了解决: TCP协议中,服务器不能同时连接多个客户端的问题 是处于socket抽象层和应用层之间的 ...
- 基于SpringMVC国际化资源配置方式
1.首先需要在spring-mvc-servlet.xml 中配置拦截器: <bean id="localeChangeInterceptor" class="or ...
- font awesome (图标字体库)
Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...