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>

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

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

我说说他们的实现方法。

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

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

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

然后用js处理下IE6就行。

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

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

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

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

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

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

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

发表评论

评论列表（0条）