实现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时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
随机推荐
- java中的多线程高并发与负载均衡的用途
感觉对于这两问题的描述,大家很迷惑把 .下面我就介绍一下: 一; 什么是java的高并发,在什么情况下产生的? 答:如果网站的访问量非常大的话,我们就应该考虑高并发的情况. 高并发的时候就是有很多用户 ...
- Photoshop经常使用快捷键(2)
51.自由变换外框右键属性:ESC 取消 斜切:能够依照该调节边角点所引导出的两条边的角度进行移动.ctrl+shift 扭曲:随意点的调节. ctrl 透视:模拟近大远小的关系.ctrl+shif ...
- swoole创建TCP服务端和客户端
服务端: server.php <?php //创建Server对象,监听 127.0.0.1:9501端口 $serv = new swoole_server("127.0.0 ...
- python利用正则表达式提取字符串
前言 正则表达式的基础知识就不说了,有兴趣的可以点击这里,提取一般分两种情况,一种是提取在文本中提取单个位置的字符串,另一种是提取连续多个位置的字符串.日志分析会遇到这种情况,下面我会分别讲一下对应的 ...
- 初识Modbus TCP/IP-------------C#编写Modbus TCP客户端程序(二）
由于感觉上一次写的篇幅过长,所以新开一贴,继续介绍Modbus TCP/IP的初步认识, 书接上回 3).03(0x03)功能码--------读保持寄存器 请求与响应格式 这是一个请求读寄存器108 ...
- java拾遗1----XML解析(一) DOM解析
XML解析技术主要有三种: (1)DOM(Document Object Model)文档对象模型:是 W3C 组织推荐的解析XML 的一种方式,即官方的XML解析技术. (2)SAX(Simple ...
- hdu 4068 I-number【大数】
题目: http://acm.hdu.edu.cn/showproblem.php?pid=4608 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- 异常：The JSP specification requires that an attribute name is preceded by whitespace
The JSP specification requires that an attribute name is preceded by whitespace: 其实这句话翻译就是 属性后面要必须有空 ...
- TFS 中工作项的定制-修改工作流
我们都会用到TFS中的工作项.一般来说,最主要的会用到任务.bug这些工作流来进行项目管理里.但我们发现,实际上,有些模板中的工作流并不能完全符合我们的需要,因此我们会进行工作流的定制操作.下面就会通 ...
- 让lu哥头痛了许久的代码(洛谷:树的统计)
错在单点修改时传的是a,应该是id[a](Line 89).谨记!!! //fushao zuishuai #include <cstdio> #include <cstring&g ...