Table 固定表头的几种方法
<style type="text/css">
/*所有内容都在这个DIV内*/
div.all {
border: 3px solid #FF00FF;
width: 80%; /*这个宽度可根据实际需要改变*/
clear: right;
}
/*表头在这个DIV内*/
div.title {
width: 100%;
}
/*内容在这个DIV内*/
div.content {
width: 100%;
overflow: scroll; /*总是显示滚动条*/
overflow-x: hidden; /*去掉横向滚动条*/
height: 100px;
}
div.title_left {
float: left;
margin-right: 17px;
}
div.content_left {
float: left;
}
.main_table {
width: 100%;
border: 1px solid #FF00FF;
border-collapse: collapse; /*边线与旁边的合并*/
table-layout:fixed;
}
.main_table tr th {
border: 1px solid #FF00FF;
overflow: hidden; /*超出长度的内容不显示*/
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all; /*字内断开*/
text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
white-space: nowrap;
}
/*单元格样式*/
.main_table tr td {
border: 1px solid #FF00FF;
overflow: hidden;
/*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
word-break: break-all;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="all">
<div class="title">
<div class="title_left">
<table class="main_table">
<tr>
<th>aaa</th><th style="width:30%">aaasdddddddddfssssssssssssssssssssssssssssssssssssssssssssssss</th><th>ccc</th><th>bbb</th>
</tr>
</table>
</div>
</div>
<div class="content">
<div class="content_left">
<table class="main_table">
<tr>
<td>aaa</td><td style="width:30%">aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>cfddddddddddddddddddddddddddddddddddddddddddddddddddc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
<tr>
<td>aaa</td><td>aaa</td><td>ccc</td><td>bbb</td>
</tr>
</table>
</div>
</div>
</div>
-------------------------------------------------------------------
<style>
table
{
margin: 0;
}
td
{
border: 1px solid #bbb;
background: #fff;
}
.fixedHeader td, #thead td
{
background: #f00;
color: #fff;
border: 1px solid #bbb;
}
#thead td
{
background: #f00;
color: #fff;
border: 1px solid #ffd800;
}
#div
{
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
#thead
{
position: fixed;
z-index: 85;
border-collapse: collapse;
}
</style>
<script>
$(function () {
var browser_version = $.browser.version;
$("#div").scroll(function (e) {
if ($(this).scrollTop() > 0) {
if ('6.0' == browser_version || '7.0' == browser_version) {
$(".fixedHeader").find("td").css({ "position": "relative", "top": $("#div").scrollTop(), "z-index": "1" });
}
else if ($("#thead").length == 0) {
var thead = $('<table id="thead" cellspacing="1" border="0" cellspacing="0">' + $("table thead").html() + '</table>');
$("#div").prepend(thead);
for (var i = 0; i < $("table thead").find("td").length; i++) {
$("#thead").find("td").eq(i).css({ "position": "absolute", "left": $("table>thead").find("td").eq(i).offset().left - 1 + "px", "width": $("table>thead").find("td").eq(i).width() + "px" });
}
}
}
else {
$("#thead").remove();
}
});
});
</script>
<div id="div">
<table border="0" cellspacing="1" width="100%" bgcolor="#fff">
<thead class="fixedHeader">
<tr>
<td align="center" class="main_td">
提现用户
</td>
<td align="center" class="main_td">
姓名
</td>
<td align="center" class="main_td">
提现银行
</td>
<td align="center" class="main_td">
提现支行省市
</td>
<td align="center" class="main_td">
提现账号
</td>
<td align="center" class="main_td">
提现总额
</td>
<td align="center" class="main_td">
到账金额
</td>
<td align="center" class="main_td">
手续费
</td>
<td align="center" class="main_td">
提现时间
</td>
<td align="center" class="main_td">
状态
</td>
<td align="center" class="main_td">
审核员
</td>
<td align="center" class="main_td">
审核时间
</td>
<td align="center" class="main_td">
审核备注
</td>
<td align="center" class="main_td">
操作
</td>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
广东省深圳市
</td>
<td align="center">
</td>
<td align="right">
6,000.00
</td>
<td align="right">
5,997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/9/13 16:25:29
</td>
<td align="center">
审核通过
</td>
<td align="center">
cyril
</td>
<td align="center">
2012/9/13 16:25:43
</td>
<td align="left">
jj
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
广东省深圳市
</td>
<td align="center">
</td>
<td align="right">
5,000.00
</td>
<td align="right">
4,997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/9/13 15:52:13
</td>
<td align="center">
审核通过
</td>
<td align="center">
cyril
</td>
<td align="center">
2012/9/13 16:24:06
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
广东省深圳市
</td>
<td align="center">
</td>
<td align="right">
5,000.00
</td>
<td align="right">
4,997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/9/13 15:51:06
</td>
<td align="center">
审核通过
</td>
<td align="center">
cyril
</td>
<td align="center">
2012/9/13 15:54:05
</td>
<td align="left">
fg2
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
广东省深圳市
</td>
<td align="center">
</td>
<td align="right">
5,000.00
</td>
<td align="right">
4,997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/9/13 15:50:30
</td>
<td align="center">
审核通过
</td>
<td align="center">
cyril
</td>
<td align="center">
2012/9/13 15:52:51
</td>
<td align="left">
fh
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
上海支行 中国银行
</td>
<td align="center">
上海上海
</td>
<td align="center">
</td>
<td align="right">
50,000.00
</td>
<td align="right">
49,995.00
</td>
<td align="right">
5.00
</td>
<td align="center">
2012/9/13 15:48:16
</td>
<td align="center">
审核失败
</td>
<td align="center">
cyril
</td>
<td align="center">
2012/9/13 15:49:46
</td>
<td align="left">
bb
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
qq 中国工商银行
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="right">
1,000.00
</td>
<td align="right">
997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/8/27 13:10:19
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
上海支行 中国银行
</td>
<td align="center">
上海上海
</td>
<td align="center">
</td>
<td align="right">
1,000.00
</td>
<td align="right">
997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/8/27 13:42:06
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
广东省深圳市
</td>
<td align="center">
</td>
<td align="right">
50,000.00
</td>
<td align="right">
49,995.00
</td>
<td align="right">
5.00
</td>
<td align="center">
2012/8/27 13:34:59
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
广东省深圳市
</td>
<td align="center">
</td>
<td align="right">
1,000.00
</td>
<td align="right">
997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/8/27 13:32:38
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
qq 中国工商银行
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="right">
1,000.00
</td>
<td align="right">
997.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/8/27 13:10:19
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=23">lend04</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
曾思
</td>
<td align="center">
QQ 中国工商银行
</td>
<td align="center">
广东省深圳市
</td>
<td align="center">
</td>
<td align="right">
200.00
</td>
<td align="right">
197.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/8/27 13:09:42
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
曾思远
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
</td>
<td align="center">
cxxgfdgfdghdgfcf1
</td>
<td align="right">
8,519.86
</td>
<td align="right">
8,516.86
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/5/16 16:22:07
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
曾思远
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
</td>
<td align="center">
cxxgfdgfdghdgfcf1
</td>
<td align="right">
8,519.87
</td>
<td align="right">
8,516.87
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/5/16 16:21:33
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=5">suenping</a> <span
style="color: #bbb">(正常)</span>
</td>
<td align="center">
苏恩平
</td>
<td align="center">
红领支行 平安银行
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="right">
6,967.52
</td>
<td align="right">
6,964.52
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/5/16 16:00:49
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=3">lend01</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
cyril
</td>
<td align="center">
qq 中国工商银行
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="right">
46,863.41
</td>
<td align="right">
46,858.41
</td>
<td align="right">
5.00
</td>
<td align="center">
2012/5/16 15:59:01
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=5">suenping</a> <span
style="color: #bbb">(正常)</span>
</td>
<td align="center">
苏恩平
</td>
<td align="center">
红领支行 平安银行
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="right">
967.52
</td>
<td align="right">
964.52
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/5/16 16:00:14
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr class="tr2">
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
曾思远
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
</td>
<td align="center">
cxxgfdgfdghdgfcf1
</td>
<td align="right">
8,519.80
</td>
<td align="right">
8,516.80
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/5/16 15:53:08
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="/login/user/user_info.aspx?userid=30">lend06</a> <span style="color: #bbb">
(正常)</span>
</td>
<td align="center">
曾思远
</td>
<td align="center">
红宝支行 平安银行
</td>
<td align="center">
</td>
<td align="center">
cxxgfdgfdghdgfcf1
</td>
<td align="right">
8,519.00
</td>
<td align="right">
8,516.00
</td>
<td align="right">
3.00
</td>
<td align="center">
2012/5/16 15:52:43
</td>
<td align="center">
用户撤回
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="left">
</td>
<td align="center">
-
</td>
</tr>
</tbody>
</table>
</div>
Table 固定表头的几种方法的更多相关文章
- HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的 ...
- mysql 从 frm 文件恢复 table 表结构的3种方法
mysql 正常运行的时候,查看 table 的结构并不是困难的事. 但是有时 mysql 发生故障,这种方法便不再可行. 当遇到故障,通常使用新的 mysql 实例来恢复当前的数据. 建表是非常重要 ...
- element table固定表头，表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
- 如何在HTML中添加表格标题？（HTML中table添加标题的2种方法）
第一种:通过 fieldset 添加标题框 示例代码: <html> <body> <fieldset> <legend>fieldset添加框标题&l ...
- table 固定表头
1 .table { border-collapse: collapse; } .table th { display: table-cell; } .fixedThead {//thead disp ...
- 【转】Java保留固定小数位的4种方法
package com.test; import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.Numb ...
- 给table加边框的两种方法
<!DOCTYPE html><html><head><style>.a { border-spacing: 1px; background-color ...
- CSS粘住固定底部的5种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...
随机推荐
- 关于iPhone图片的问题。
由于iOS设备的屏幕分辨率不尽相同,有大有小,那么在不同设备中显示同一张图片,可能会造成图片被拉伸.变形,严重影响用户体验.为了让图片在不同设备中都能得到很好的显示效果,同一类图片我们一般会准备几种版 ...
- oracle索引监控
目的:监控oracle索引的有效性,看索引有没有被使用.然后根据监控结果删除或者调整索引. 步骤: 1.监控指定索引 命令: alter index 索引名 monitoring usage; 如 ...
- MySQL备份锁
无论逻辑备份还是物理备份,为了获取一致性位点,都强依赖于FTWRL(Flush Table With Read Lock).这个锁杀伤力非常大,因为持有锁的这段时间,整个数据库实质上不能对外提供写服务 ...
- mongodb架构篇
一. 复制集 Replica set的架构 Replica set的部署 主从操作日志 在local数据库里面:db.oplog.rs.find() 日志的基本信息:db.printReplicat ...
- python安装numpy、scipy和matplotlib等whl包的方法
最近装了python和PyCharm开发环境,但是在安装numpy和matplotlib等包时出现了问题,现总结一下在windows平台下的安装方法. 由于现在找不到了工具包新版本的exe文件,所以采 ...
- android OnTouchListener 按下与抬起
写法一: private OnTouchListener pressOnTouchListener = new OnTouchListener(){ @Override public boolean ...
- 对C#泛型实例化对像
public class A { } public class B<T> { public static T Get() { //在这一块如何实例化T这个对象呢?如果用default(T) ...
- 安全测试 - SQL注入
1. 工具测试: 使用SQLMAP进行扫描 2. 手工测试: 观察参数的值value是否为数字型.如果是数字型进行数字型测试,否则跳到第4步进行字符型测试(例如如果出现a那说明是字符型,如果出现2则将 ...
- 台式机装原版Win2008R2
台式机装原版Win2008R2 坑了老半天,总结出几点 1,系统os下载: http://msdn.itellyou.cn/ 注:其他地方下载的,装后发现不是起不来就是驱动装不了. 2,u盘里放个压缩 ...
- [LeetCode] Count and Say 计数和读法
The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...