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 ).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 >
-
</td>
</tr>
</tbody>
</table>
</div>