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