这段时间在实现甘特图,先是用一个2X2的表格布局,表格里面填4个div,让右下角的div出现x和y坐标的滚动条,分别实现右上方的div还有左下方的div的滚动条同步,用百分比控制宽度,弄来弄去div的宽度控制不到。还好huacn的指点,用div来代替表格布局。我把基本代码发出来给大家共享。
关于用div实现table的效果<div id="main" style="border:1px dashed #CCC; width:100%;">
关于用div实现table的效果    
<div class="row" style="margin:4px;">
关于用div实现table的效果        
<div class="left" id="div1" style="float:left; margin-right:4px; background:red; height:100px; width:20%;">
关于用div实现table的效果        
</div>
关于用div实现table的效果        
<div class="right" id="div2" style="OVERFLOW-X:hidden;VERFLOW-Y:hidden;background:blue;height:100px;width:75%;">
关于用div实现table的效果        
</div>
关于用div实现table的效果    
</div>
关于用div实现table的效果    
<div class="row" id="div3" style="margin:4px;">
关于用div实现table的效果        
<div class="left" style="OVERFLOW-X:hidden;VERFLOW-Y:hidden;float:left; margin-right:4px; 
关于用div实现table的效果
关于用div实现table的效果background:red;height:100px;width:20%;"
>
关于用div实现table的效果        
</div>
关于用div实现table的效果        
<div class="right" id="div4" onscroll="document.getElementById('div2').scrollLeft = 
关于用div实现table的效果
关于用div实现table的效果this.scrollLeft;document.getElementById('div3').scrollTop = this.scrollTop;"
 style="OVERFLOW-X:scroll;OVERFLOW-
关于用div实现table的效果
关于用div实现table的效果Y:scroll;background:blue;height:100px;width:75%;"
>
关于用div实现table的效果        
</div>
关于用div实现table的效果    
</div>
关于用div实现table的效果
</div> 
  

相关文章: