20130728HTML-CSS-DIV-FIXED-GRID

最新推荐文章于 2024-08-12 22:19:13 发布

alga_1

最新推荐文章于 2024-08-12 22:19:13 发布

阅读量864

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/alga_1/article/details/9564305

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

用CSS和javascript实现一个可以有固定行和列的表格，很粗糙，不过好像有点模样了。

注意

<!DOCTYPE html>这个东东要有，这样在IE中显示才会是想要的效果;
最左上角的div的属性中要有一个float:left，要不然会在它与固定行之间有一个空隙。这里有个解释。
固定行高24px;固定列宽80px;
实现这样的关键在于两个东东，padding和over-flow;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<script type="text/javascript">
	function t() { 
		var top = document.getElementById('d0').getBoundingClientRect().top+24;
		var height = document.getElementById('d0').clientHeight-24;
		var width = document.getElementById('d0').clientWidth;
		document.getElementById('hdr0').setAttribute("style", "width:"+width+"px;");
		width -= 80;
		document.getElementById('d1').setAttribute("style", "padding-top:24px;height:"+height+"px;");
		document.getElementById('d2').setAttribute("style", "padding-top:24px;");
		document.getElementById('hdr2').setAttribute("style", "width:"+width+"px;");
	}
	function doscroll() { 
		document.getElementById('d1').scrollTop = document.getElementById('d0').scrollTop; 
		document.getElementById('hdr2').scrollLeft = document.getElementById('d0').scrollLeft;
	}
</script>
<style type="text/css">
	#d0{
		z-index: 2;
		width: 150px; height: 150px; /*border: 1px solid silver; */
		overflow: auto;
		background-color: Cyan;
	}
	#d1{
		z-index: 2; 
		width: 80px; 
		/*height: 200px; */
		background-color: red;
		position: absolute;
		overflow: hidden;
		/*border: 1px solid black;*/
	}
	#d2{
		z-index: 1; 
		width: 200px; 
		/*height: 200px; */
		background-color: Beige; 
		position: relative; 
		padding-left: 80px;
		padding-top: 24px;
		/*border: 1px solid black;*/
	}
	#hdr0{
		z-index: 3;
		position: absolute;
		overflow: hidden;
		height: 24px;
		/*border: 1px solid blue;*/
	}
	#hdr1{
		z-inline: 3;
		height: 100%;
		width: 80px;
		display: inline-block;
		background-color: Cyan;
		/*border: 1px solid red;*/
		float: left;
	}
	#hdr2{
		z-inline: 2;
		height: 100%;
		display: inline-block;
		background-color: white;
		overflow: hidden;
		/*border: 1px solid red;*/
	}
	span{
		padding-left : 15px;
		padding-right : 15px;
		border: 1px solid red;
	}
</style>
<body>
	<hr/>
<input type="button" οnclick="t()" value="c"/>
<table><tr><td>left</td><td>
<div id="d0" οnscrοll="doscroll()">
	<div id="hdr0">
		<div id="hdr1">topleft</div>
		<div id="hdr2"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span></div>
	</div>
	<div id="d1">
		<div>row1</div>
		<div>row2</div>
		<div>row3</div>
		<div>row4</div>
		<div>row1</div>
		<div>row2</div>
		<div>row3</div>
		<input type="button" value="a"/>
	</div>
	<div id="d2">
		<span>A</span><span>B</span><span>C</span><span>D</span><span>E</span>
		<div>row2</div>
		<div>row3</div>
		<div>row4</div>
		<div>row1</div>
		<div>row2</div>
		<div>row3</div>
		<input type="button" value="b"/>
	</div>
</div>
</td></tr></table>
</body>
</html>