html中怎么固定一个table的表头和表位,拖动滚动条中间的数据滚动,而表头和表尾固定呢?表尾是用来做合计

html-css09

html中怎么固定一个table的表头和表位,拖动滚动条中间的数据滚动,而表头和表尾固定呢?表尾是用来做合计,第1张

给你写个固定表头的例子,固定表尾的就当是课堂练习,希望你能举一反三:

<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>

这种固定导航的效果,很多电商例如淘宝,都会有。

我说说他们的实现方法。

一,js算scroll的高度,就是滚动条滚了多高。

二,算悬浮的导航距离顶部的高度。

三,window的时候,对比这两个高度,如果一大于二,那么导航加个fixed。(IE7以上都有效)

然后用js处理下IE6就行。

建议去搜下相关js代码,我一般都用jQuery写。

你想要的table的头部也是一个道理,但是thead没办法fixed吧?

所以弄2个table吧,1个table放头部内容,1个table放具体内容。

另外,expression慎用,消耗浏览器资源不是一点两点。