<HTML>
<HEAD>
<TITLE>JS Example</TITLE>
<style type='text/css'>
tr.locktop{
position:relative
top:expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-1:0)-1)
}
</style>
</HEAD>
<BODY>
表头前面的内容，这些是可以滚出屏幕的，只有表头锁定。
<table id=pol_table_list cellspacing=0>
<tr class=locktop><th>表头
<tr><td>1
<tr><td>2
<tr><td>3
<tr><td>4
<tr><td>5
<tr><td>6
<tr><td>7
<tr><td>8
<tr><td>9
<tr><td>10
</table>
</BODY>
</HTML>
把浏览器窗口调得很小，才能看到效果，向下滚动的时候表头是固定的
<div style="width: 800px">2 <div class="table-head">
3 <table>
4 <colgroup>
5 <col style="width: 80px" />
6 <col />
7 </colgroup>
8 <thead>
9 <tr><th>序号</th><th>内容</th></tr>
10 </thead>
11 </table>
12 </div>
13 <div class="table-body">
14 <table>
15 <colgroup><col style="width: 80px" /><col /></colgroup>
16 <tbody>
17 <tr><td>1</td><td>我只是用来测试的</td></tr>
18 <tr><td>2</td><td>我只是用来测试的</td></tr>
19 <tr><td>3</td><td>我只是用来测试的</td></tr>
20 <tr><td>4</td><td>我只是用来测试的</td></tr>
21 <tr><td>5</td><td>我只是用来测试的</td></tr>
22 <tr><td>6</td><td>我只是用来测试的</td></tr>
23 <tr><td>7</td><td>我只是用来测试的</td></tr>
24 <tr><td>8</td><td>我只是用来测试的</td></tr>
25 <tr><td>9</td><td>我只是用来测试的</td></tr>
26 <tr><td>10</td><td>我只是用来测试的</td></tr>
27 <tr><td>11</td><td>我只是用来测试的</td></tr>
28 <tr><td>12</td><td>我只是用来测试的</td></tr>
29 <tr><td>13</td><td>我只是用来测试的</td></tr>
30 <tr><td>14</td><td>我只是用来测试的</td></tr>
31 <tr><td>15</td><td>我只是用来测试的</td></tr>
32 </tbody>
33 </table>
34 </div>
35 </div>
<style>*{ margin:0 padding:0 list-style:none}
.table, .table td{ border:1px solid #999border-collapse:collapse margin:0 auto}
.table td{ font-size:14px text-align:center line-height:25px}
.tableTitle{ position:fixed background:#FFF left:50% margin-left:-250px}
</style>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="table tableTitle">
<tr>
<td width="33%">姓名</td>
<td width="33%">语文</td>
<td>数学</td>
</tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td> </td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>92</td>
</tr>
<tr>
<td>王麻子</td>
<td>96</td>
<td>88</td>
</tr>
</table>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）