Css实现固定表头
<!doctype html public "-//w3c//dtd html 4.0 strict//en">
<html>
<head>
<style>
body {
background-color: #F0F0F0 ;
font: 11px "verdana","Arial";
width:90%;
margin-left:auto;
margin-right:auto;
}
.tScroll {
border: 1px #7494BF solid;
background-color: #ffffff;
overflow: scroll;
overflow-x:hidden;
height:100px;
cursor: default;
}
tr.tableHead {
position:relative;
background-color:#BFCEE7;
height: 16px;
text-align: center;
}
td {
font: 11px "Verdana", "Arial";
}
td.asBtn{
border: #7494BF solid;
border-width: 0px 1px 1px 0px;
}
table {
border:0px;
width:100%;
}
</style>
</head>
<body>
<div class="tScroll" id="tC">
<table cellspacing="0" cellpadding="0">
<tr class="tableHead" onselectstart="return false"style="top:expression(document.getElementById('tC').scrollTop)">
<td class="asBtn">heading1</td>
<td class="asBtn">heading2</td><td class="asBtn">heading3</td>
<td class="asBtn">heading4</td><td class="asBtn">heading5</td>
<td class="asBtn">heading6</td>
</tr>
<tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell n</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
</div>
</body>
</html>
<html>
<head>
<style>
body {
background-color: #F0F0F0 ;
font: 11px "verdana","Arial";
width:90%;
margin-left:auto;
margin-right:auto;
}
.tScroll {
border: 1px #7494BF solid;
background-color: #ffffff;
overflow: scroll;
overflow-x:hidden;
height:100px;
cursor: default;
}
tr.tableHead {
position:relative;
background-color:#BFCEE7;
height: 16px;
text-align: center;
}
td {
font: 11px "Verdana", "Arial";
}
td.asBtn{
border: #7494BF solid;
border-width: 0px 1px 1px 0px;
}
table {
border:0px;
width:100%;
}
</style>
</head>
<body>
<div class="tScroll" id="tC">
<table cellspacing="0" cellpadding="0">
<tr class="tableHead" onselectstart="return false"style="top:expression(document.getElementById('tC').scrollTop)">
<td class="asBtn">heading1</td>
<td class="asBtn">heading2</td><td class="asBtn">heading3</td>
<td class="asBtn">heading4</td><td class="asBtn">heading5</td>
<td class="asBtn">heading6</td>
</tr>
<tr><td>cell1</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell n</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
</div>
</body>
</html>
作者：houfeng
出处：http://houfeng.cnblogs.com
本文版权归作者和博客园共有,未经作者同意请保留此声明.
出处：http://houfeng.cnblogs.com
本文版权归作者和博客园共有,未经作者同意请保留此声明.
