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

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

<HTML>

<HEAD>

<TITLE>JS Example</TITLE>

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>

表头前面的内容，这些是可以滚出屏幕的，只有表头锁定。

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

把浏览器窗口调得很小，才能看到效果，向下滚动的时候表头是固定的

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>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7240006.html

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

发表评论

评论列表（0条）