固定table表头

最新推荐文章于 2023-09-27 18:39:30 发布

掘客DIGGKR

最新推荐文章于 2023-09-27 18:39:30 发布

阅读量5.3k

点赞数

分类专栏： CSS 文章标签： table class border

本文链接：https://blog.csdn.net/sl1202/article/details/7314667

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

固定表头两种方式:

1. 表头和表内容分别在两个table中, 互不干扰.

优点: 实现简单

缺点: 两个table 的列宽不好保持一致, 缺乏灵活性

2. 用标签的属性来处理

<html>
	<head>
		<style type="text/css"> 

/*重点：固定行头样式*/
.scrollRowThead 
{
     position: relative; 
     left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);
     z-index:0;
}
 
/*重点：固定表头样式*/
.scrollColThead {
     position: relative; 
     top: expression(this.parentElement.parentElement.parentElement.scrollTop);
     z-index:2;
}

/*行列交叉的地方*/
.scrollCR {
     z-index:3;
} 

/*表格的线*/
.scrolltable 
{ 
		border-bottom:1px solid #CCCCCC; 
		border-right:1px solid #CCCCCC; 
}
 
/*单元格的线等*/
.scrolltable td,.scrollTable th 
{
     border-left: 1px solid #CCCCCC; 
     border-top: 1px solid #CCCCCC; 
     padding: 5px; 
}

</style>
</head>
	<body>
		<div style="height:200px; width:200px; border: 1px solid  blue;  overflow-y:auto;  "> 
				<table border="0" cellpadding="3" cellspacing="0" class="scrolltable">
					<tr class="scrollColThead" style="background-color:green;"><th class="scrollRowThead scrollCR">lie1</th><th>lie1</th></tr>
					<tr><td class="scrollRowThead">content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
					<tr><td>content</td><td>content</td></tr>
				</table>
		</div>
	</body>
</html>

掘客DIGGKR

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
固定table表头

固定表头两种方式:1. 表头和表内容分别在两个table中, 互不干扰. 优点: 实现简单缺点: 两个table 的列宽不好保持一致, 缺乏灵活性 2. 用标签的属性来处理 /*重点：固定行头样式*/.scrollRowThead { position: relative; left: expression
复制链接

扫一扫

专栏目录