<!doctype html />
<html>
<head>
<title>表头固定Demo</title>
<style type="text/css">
.frozenHeadTable
{
width:821px;
border-right:1px solid blue;
}
.frozenHeadTable .headTable
{
width:100%;
border-collapse:collapse;
}
.frozenHeadTable .headTable th
{
border-left:1px solid blue;
border-top:1px solid blue;
border-bottom:1px solid blue;
height:25px;
background-color:#EB8000;
color:White;
}
.frozenHeadTable .bodyTable
{
width:100%;
border-collapse:collapse;
}
.frozenHeadTable .bodyTable td
{
border-left:1px solid blue;
border-bottom:1px solid blue;
height:25px;
background-color:#ECE9D8;
}
.frozenHeadTable .bodyDiv
{
width:100%;
overflow:auto;
max-height:195px;
}
</style>
</head>
<body>
<div>
说明:<br />
表格为4*10,即4行10列,每列宽200px,共800px,<br />
滚动条在各浏览器默认宽度为16px,<br />
width是不包含border在内的,4列就有5个纵向的border,共5px<br />
宽总共821px。<br />
通过调整.frozenHeadTable .bodyDiv内的max-height可以控制滚动条是否出现。<br /><br />
</div>
<div class="frozenHeadTable">
<table class="headTable">
<col style="width:200px" />
<col style="width:200px" />
<col style="width:200px" />
<col />
<tbody>
<tr><th>学号</th><th>姓名</th><th>数学成绩</th><th>语文成绩</th></tr>
</tbody>
</table>
<div class="bodyDiv">
<table class="bodyTable">
<col style="width:200px" />
<col style="width:200px" />
<col style="width:200px" />
<col />
<tbody>
<tr><td>20120001</td><td>王成</td><td>100</td><td>90</td></tr>
<tr><td>20120002</td><td>徐雅南</td><td>100</td><td>90</td></tr>
<tr><td>20120003</td><td>吉凡</td><td>100</td><td>90</td></tr>
<tr><td>20120004</td><td>鞠影</td><td>100</td><td>90</td></tr>
<tr><td>20120005</td><td>张天伟</td><td>100</td><td>90</td></tr>
<tr><td>20120006</td><td>蒋林毅</td><td>100</td><td>90</td></tr>
<tr><td>20120007</td><td>刘全洪</td><td>100</td><td>90</td></tr>
<tr><td>20120008</td><td>郭俊浩</td><td>100</td><td>90</td></tr>
<tr><td>20120009</td><td>王宝</td><td>100</td><td>90</td></tr>
<tr><td>20120010</td><td>赵鑫慧</td><td>100</td><td>90</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<html>
<head>
<title>表头固定Demo</title>
<style type="text/css">
.frozenHeadTable
{
width:821px;
border-right:1px solid blue;
}
.frozenHeadTable .headTable
{
width:100%;
border-collapse:collapse;
}
.frozenHeadTable .headTable th
{
border-left:1px solid blue;
border-top:1px solid blue;
border-bottom:1px solid blue;
height:25px;
background-color:#EB8000;
color:White;
}
.frozenHeadTable .bodyTable
{
width:100%;
border-collapse:collapse;
}
.frozenHeadTable .bodyTable td
{
border-left:1px solid blue;
border-bottom:1px solid blue;
height:25px;
background-color:#ECE9D8;
}
.frozenHeadTable .bodyDiv
{
width:100%;
overflow:auto;
max-height:195px;
}
</style>
</head>
<body>
<div>
说明:<br />
表格为4*10,即4行10列,每列宽200px,共800px,<br />
滚动条在各浏览器默认宽度为16px,<br />
width是不包含border在内的,4列就有5个纵向的border,共5px<br />
宽总共821px。<br />
通过调整.frozenHeadTable .bodyDiv内的max-height可以控制滚动条是否出现。<br /><br />
</div>
<div class="frozenHeadTable">
<table class="headTable">
<col style="width:200px" />
<col style="width:200px" />
<col style="width:200px" />
<col />
<tbody>
<tr><th>学号</th><th>姓名</th><th>数学成绩</th><th>语文成绩</th></tr>
</tbody>
</table>
<div class="bodyDiv">
<table class="bodyTable">
<col style="width:200px" />
<col style="width:200px" />
<col style="width:200px" />
<col />
<tbody>
<tr><td>20120001</td><td>王成</td><td>100</td><td>90</td></tr>
<tr><td>20120002</td><td>徐雅南</td><td>100</td><td>90</td></tr>
<tr><td>20120003</td><td>吉凡</td><td>100</td><td>90</td></tr>
<tr><td>20120004</td><td>鞠影</td><td>100</td><td>90</td></tr>
<tr><td>20120005</td><td>张天伟</td><td>100</td><td>90</td></tr>
<tr><td>20120006</td><td>蒋林毅</td><td>100</td><td>90</td></tr>
<tr><td>20120007</td><td>刘全洪</td><td>100</td><td>90</td></tr>
<tr><td>20120008</td><td>郭俊浩</td><td>100</td><td>90</td></tr>
<tr><td>20120009</td><td>王宝</td><td>100</td><td>90</td></tr>
<tr><td>20120010</td><td>赵鑫慧</td><td>100</td><td>90</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>