20130728HTML-CSS-DIV-FIXED-GRID

来源：互联网发布：mac 上打开exe 编辑：程序博客网时间：2024/06/16 02:57

用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" onclick="t()" value="c"/><table><tr><td>left</td><td><div id="d0" onscroll="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>