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元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器 ...
随机推荐
- iOS系列 基础篇 01 构建HelloWorld，剖析并真机测试
iOS基础 01 构建HelloWorld,剖析并真机测试 前言: 从控制台输出HelloWorld是我们学习各种语言的第一步,也是我们人生中非常重要的一步. 多年之后,我希望我们仍能怀有学习上进的心 ...
- uploadify插件Http Error（302）错误记录（MVC）
由于项目(asp.net MVC)需要做一个附件上传的功能,使用的是jQuery的Uploadify插件的2.1.0版本,上传文件到自己项目指定的文件夹下面.做完之后,在谷歌上测试是正确的,在火狐上报 ...
- 使用vscode访问和修改远程计算机文件
使用vscode访问和修改远程文件,分三步实现:在远程linux机器上安装rmate:在本地windows上安装openssh:在vscode中安装扩展remote vscode. 1. 在远程lin ...
- nginx反向代理+集群
1.前期准备: client:192.168.4.1 eth0 proxy:192.168.4.5 eth0 web1:192.168.4.100 eth0 内容2 web2:192.168.4.20 ...
- web安全相关知识
xss攻击入门 XSS攻击及防御 XSS的原理分析与解剖 浅谈CSRF攻击方式 利用HTTP-only Cookie缓解XSS之痛 SERVLET 2.5为COOKIE配置HTTPONLY属性 coo ...
- netty学习资料
netty学习资料推荐官方文档和<netty权威指南>和<netty in action>这两本书.下面收集下网上分享的资料 netty官方参考文档 Netty 4.x Use ...
- 【只需3步】源码手动安装Apache以及配置（亲测可行）
作者小波/QQ463431476欢迎转载! redhat6采用centos yum源. 第一步下载apache依赖的软件包并安装 安装 apr下载地址:http://apr.apache.org/do ...
- 阿里云ECS服务器配置（Ubuntu+JAVA+Tomcat+Mysql）
最近购买了阿里云的ECS服务器,就服务器的安装配置做简要的说明,也方便日后查看. 1.远程操作服务器 远程操作服务器可以使用putty工具,下载地址:http://pan.baidu.com/s/1q ...
- Centos7 关闭防火墙
CentOS 7.0默认使用的是firewall作为防火墙,使用iptables必须重新设置一下 1.直接关闭防火墙 systemctl stop firewalld.service #停止firew ...
- win8改win7笔记
内存<=4G,选32位(×86) 内存>=4G,选64位(×64) (非必须) BIOS设置 USB Boot Support Disabled改为Enabled(如 ...