Table 固定表头的几种方法

<style type="text/css">
/*所有内容都在这个DIV内*/
div.all {
border: 3px solid #FF00FF;
80%; /*这个宽度可根据实际需要改变*/
clear: right;
}

/*表头在这个DIV内*/
div.title {
100%;
}
/*内容在这个DIV内*/
div.content {
100%;
overflow: scroll; /*总是显示滚动条*/
overflow-x: hidden; /*去掉横向滚动条*/
height: 100px;
}
div.title_left {
float: left;
margin-right: 17px;
}
div.content_left {
float: left;
}

.main_table {
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="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="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>

原文地址:https://www.cnblogs.com/yangpeng-jingjing/p/6178482.html