js 表头固定
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.table_head{margin-right:1.2%;}
.margin{margin-right: 0px;}
.table_head th{background-color: green;}
#scroll_table{ height:100px;overflow:auto;}
table{border-collapse:collapse;width:100%; }
th,td{border:1px solid #CCC; width:100px; text-align: center;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script type="text/javascript">
$(function (){
var tab_offsetHeight=document.getElementById("data_table").offsetHeight;
var table_head=document.getElementById("scroll_table").offsetHeight;
if(tab_offsetHeight<table_head){
$(".table_head").addClass("margin");
}
});
</script>
</head>
<body>
<div class="table_head">
<table>
<tr>
<th>固定表头1</th><th>固定表头2</th><th>表头3</th><th>表头4</th><th>表头5</th><th>表头4</th><th>表头5</th><th>表头4</th>
</tr>
</table>
</div>
<div id="scroll_table">
<table id="data_table" >
<tbody>
<tr><td>固定表头1-1</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr>
<tr><td>固定表头1-2</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr>
<tr><td>固定表头1-1</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr>
<tr><td>固定表头1-2</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr>
<tr><td>固定表头1-1</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr>
<tr><td>固定表头1-2</td><td>固定表头2</td><td>表头3</td><td>表头4</td><td>表头5</td><td>表头4</td><td>表头5</td><td>表头4</td></tr>
</tbody>
</table>
</div>
</body>
</html>
