html漂亮的列表表头,html列表表头锁定，列表高度可根据浏览器高度计算

首先看html

序号内容

1	我只是用来测试的
2	我只是用来测试的
3	我只是用来测试的
4	我只是用来测试的
5	我只是用来测试的
6	我只是用来测试的
7	我只是用来测试的
8	我只是用来测试的
9	我只是用来测试的
10	我只是用来测试的
11	我只是用来测试的
12	我只是用来测试的
13	我只是用来测试的
14	我只是用来测试的
15	我只是用来测试的

css如下

.table-head{padding-right:11px;padding-top:14px;padding-bottom:5px;}

.table-body{width:100%; height:800px;overflow-y:scroll;}

.table-head table,.table-body table{width:100%;}

.table-body table tr:nth-child(2n+1){}

.table-body table tr:hover{}

js如下

autodivheight();

function autodivheight(){ //函数：获取尺寸

//获取浏览器窗口高度

var winHeight=0;

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取浏览器窗口高度

if (document.documentElement && document.documentElement.clientHeight)

winHeight = document.documentElement.clientHeight;

//DIV高度为浏览器窗口的高度

var btHeight1 = document.getElementById("btid1").offsetHeight;//表头高度

document.getElementById("gdid").style.height= winHeight-btHeight1-15 +"px";

}