圆月山庄资源网 Design By www.vgjia.com
之前在做一个项目的时候,需要用到表格显示一个月中每天的相关信息记录(一天的信息记录显示为一行)。于是有了这样一个问题,一次性将数据全部显示出来,页面就会出现滚动条,这样的话就不能同时看到表头信息和表格底部的数据记录,把每个月的信息记录都分为两页显示的话,又麻烦(切换月份后还要在进行分页操作)。把情况跟领导描述了下,表示不知道怎么做好了,领导略微想了下说,“把表头固定不就行了”。
好吧,固定表头,我只在Excel中操作过,在页面上要把table表头固定,对于我这样的菜鸟来说,简直就是“蜀道难,难于上青天”啊。幸亏有“万能”的度娘啊,还真给我百度到了几个例子,由于但是急于完成那个效果,没有记下我采用的那篇博文的地址和博主。这段时间没什么事儿,回头把项目中固定table表头的实现代码重新整理了下,记录下来方便以后回顾。
当时从百度出来的范例中选了各种实现方法来尝试,感觉这两个种方法比较容易理解,实现的思想也差不多,只是代码的组织上不同而已,今天就把这两种实现方法都贴出来对比一下。
实现方法一:
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 固定表格表头 </title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
div{
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
margin-top: 5px;
margin-left: 12px;
padding-top: -2px;
padding-bottom: 5px;
border: 3px solid #009933;
}
table{
width: 100%;
border-color: #d2f1ac;
border-collapse: collapse;
border-top: 0px solid #ffffff;
}
.fixedtd{
position: relative;
z-index: 1;
background: #009933;
text-align: center;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<td class="fixedtd">
固定表头第一列
</td>
<td class="fixedtd">
固定表头第二列
</td>
<td class="fixedtd">
固定表头第三列
</td>
<td class="fixedtd">
固定表头第四列
</td>
<td class="fixedtd">
固定表头第五列
</td>
<td class="fixedtd">
固定表头第六列
</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
</tr>
<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
</tr>
<tr>
<td>H1</td>
<td>H2</td>
<td>H3</td>
<td>H4</td>
<td>H5</td>
<td>H6</td>
</tr>
</table>
</div>
</body>
</html>
运行效果如下图所示:
该实现方法的一个不足之处在于:表头行与下面可滚动的行的宽度相同,div的滚动条显示在表头行的下方,覆盖了可滚动的行中最后一列的部分宽度,如果将div的横向滚动条也显示出来的话,那么不管怎样设置table和div的宽度,都不能使横向的滚动条消失(如果表格数据行的高度和小于div的高度值时,纵向的滚动条会消失)。
实现方法二:
复制代码代码如下:
<html>
<head>
<title>CSS控制表格表头固定</title>
<style type="text/css">
div.tableContainer {
clear: both;
border-collapse: collapse;
border: 2px solid #009933;
height: expression(document.body.clientHeight*0.3);
overflow: auto;
width: 1024px;
}
div.tableContainer table {
float: left;
width: 100%;
border-collapse: collapse;
empty-cells: hide;
}
thead.fixedHeader tr {
position: relative;
top: expression(document.getElementById("tableContainer").scrollTop);
}
thead.fixedHeader th {
background: #009933;
border-left: 1px solid #d2f1ac;
border-right: 1px solid #d2f1ac;
border-top: 1px solid #d2f1ac;
border-bottom: 1px solid #d2f1ac;
font-weight: normal;
padding: 4px 3px;
text-align: center;
}
tbody.scrollContent td, tbody.scrollContent tr td {
border-bottom: 1px solid #d2f1ac;
border-left: 1px solid #d2f1ac;
border-right: 1px solid #d2f1ac;
border-top: 1px solid #d2f1ac;
padding: 2px 3px;
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table>
<thead class="fixedHeader">
<tr>
<th colspan="5">测试效果</th>
</tr>
<tr>
<th>表头第一列</th>
<th>表头第二列</th>
<th>表头第三列</th>
<th>表头第四列</th>
<th>表头第五列</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
<td>第一行第四列</td>
<td>第一行第五列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
<td>第二行第五列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
<td>第三行第五列</td>
</tr>
<tr>
<td>第四行第一列</td>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
<td>第四行第五列</td>
</tr>
<tr>
<td>第五行第一列</td>
<td>第五行第二列</td>
<td>第五行第三列</td>
<td>第五行第四列</td>
<td>第五行第五列</td>
</tr>
<tr>
<td>第六行第一列</td>
<td>第六行第二列</td>
<td>第六行第三列</td>
<td>第六行第四列</td>
<td>第六行第五列</td>
</tr>
<tr>
<td>第七行第一列</td>
<td>第七行第二列</td>
<td>第七行第三列</td>
<td>第七行第四列</td>
<td>第七行第五列</td>
</tr>
<tr>
<td>第八行第一列</td>
<td>第八行第二列</td>
<td>第八行第三列</td>
<td>第八行第四列</td>
<td>第八行第五列</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行效果如下图所示:
好吧,固定表头,我只在Excel中操作过,在页面上要把table表头固定,对于我这样的菜鸟来说,简直就是“蜀道难,难于上青天”啊。幸亏有“万能”的度娘啊,还真给我百度到了几个例子,由于但是急于完成那个效果,没有记下我采用的那篇博文的地址和博主。这段时间没什么事儿,回头把项目中固定table表头的实现代码重新整理了下,记录下来方便以后回顾。
当时从百度出来的范例中选了各种实现方法来尝试,感觉这两个种方法比较容易理解,实现的思想也差不多,只是代码的组织上不同而已,今天就把这两种实现方法都贴出来对比一下。
实现方法一:
复制代码代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 固定表格表头 </title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
div{
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
margin-top: 5px;
margin-left: 12px;
padding-top: -2px;
padding-bottom: 5px;
border: 3px solid #009933;
}
table{
width: 100%;
border-color: #d2f1ac;
border-collapse: collapse;
border-top: 0px solid #ffffff;
}
.fixedtd{
position: relative;
z-index: 1;
background: #009933;
text-align: center;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<td class="fixedtd">
固定表头第一列
</td>
<td class="fixedtd">
固定表头第二列
</td>
<td class="fixedtd">
固定表头第三列
</td>
<td class="fixedtd">
固定表头第四列
</td>
<td class="fixedtd">
固定表头第五列
</td>
<td class="fixedtd">
固定表头第六列
</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
</tr>
<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
</tr>
<tr>
<td>H1</td>
<td>H2</td>
<td>H3</td>
<td>H4</td>
<td>H5</td>
<td>H6</td>
</tr>
</table>
</div>
</body>
</html>
运行效果如下图所示:
该实现方法的一个不足之处在于:表头行与下面可滚动的行的宽度相同,div的滚动条显示在表头行的下方,覆盖了可滚动的行中最后一列的部分宽度,如果将div的横向滚动条也显示出来的话,那么不管怎样设置table和div的宽度,都不能使横向的滚动条消失(如果表格数据行的高度和小于div的高度值时,纵向的滚动条会消失)。
实现方法二:
复制代码代码如下:
<html>
<head>
<title>CSS控制表格表头固定</title>
<style type="text/css">
div.tableContainer {
clear: both;
border-collapse: collapse;
border: 2px solid #009933;
height: expression(document.body.clientHeight*0.3);
overflow: auto;
width: 1024px;
}
div.tableContainer table {
float: left;
width: 100%;
border-collapse: collapse;
empty-cells: hide;
}
thead.fixedHeader tr {
position: relative;
top: expression(document.getElementById("tableContainer").scrollTop);
}
thead.fixedHeader th {
background: #009933;
border-left: 1px solid #d2f1ac;
border-right: 1px solid #d2f1ac;
border-top: 1px solid #d2f1ac;
border-bottom: 1px solid #d2f1ac;
font-weight: normal;
padding: 4px 3px;
text-align: center;
}
tbody.scrollContent td, tbody.scrollContent tr td {
border-bottom: 1px solid #d2f1ac;
border-left: 1px solid #d2f1ac;
border-right: 1px solid #d2f1ac;
border-top: 1px solid #d2f1ac;
padding: 2px 3px;
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table>
<thead class="fixedHeader">
<tr>
<th colspan="5">测试效果</th>
</tr>
<tr>
<th>表头第一列</th>
<th>表头第二列</th>
<th>表头第三列</th>
<th>表头第四列</th>
<th>表头第五列</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
<td>第一行第四列</td>
<td>第一行第五列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
<td>第二行第五列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
<td>第三行第五列</td>
</tr>
<tr>
<td>第四行第一列</td>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
<td>第四行第五列</td>
</tr>
<tr>
<td>第五行第一列</td>
<td>第五行第二列</td>
<td>第五行第三列</td>
<td>第五行第四列</td>
<td>第五行第五列</td>
</tr>
<tr>
<td>第六行第一列</td>
<td>第六行第二列</td>
<td>第六行第三列</td>
<td>第六行第四列</td>
<td>第六行第五列</td>
</tr>
<tr>
<td>第七行第一列</td>
<td>第七行第二列</td>
<td>第七行第三列</td>
<td>第七行第四列</td>
<td>第七行第五列</td>
</tr>
<tr>
<td>第八行第一列</td>
<td>第八行第二列</td>
<td>第八行第三列</td>
<td>第八行第四列</td>
<td>第八行第五列</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行效果如下图所示:
标签:
css固定表头,table表头
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]