html 如何让一个表的前几列固定，不随着滚动条移动？

html-css021

html 如何让一个表的前几列固定，不随着滚动条移动？,第1张

1、首先新建一个web项目，主要用到了html文件和css文件。

2、然后在html文件中，有图中的代码，引入css文件和设置一个div标签。

3、然后这里是css样式文件，主要看图中红框中内容，使用fixed定位方式。

4、运行项目后，可以看到div在右下角（为了模拟这里的body高度设置很高，足够滚动条下拉到底部的）。

5、然后滑动滚动条，即使到达底部后，div的位置依旧没有修改，就完成了。

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

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

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