我认为没有人可以解决，关于DIV滚动条的。进来看看....

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function gridScroll(oGrid,gridid){ var iX = oGrid.scrollLeft;

var oHeader = document.getElementById(gridid + '_Header');
oHeader.scrollLeft = iX;
}
//-->
</SCRIPT>
</HEAD><BODY>
<div id="dtgMain_Header" style="WIDTH:300px;HEIGHT:50px;overflow:hidden" onscroll="gridScroll(this,'dtgMain')">
<TABLE Width=500 id="dtgMain" border=1>
<TR>
<TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD>
<TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD>
</TR></TABLE></div>
<div style="WIDTH:315px;HEIGHT:92px;overflow-x:auto;overflow-y:scroll" onscroll="gridScroll(this,'dtgMain')">
<TABLE Width=500 id="dtgMain" border=1>
<TR>
<TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD>
<TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD>
</TR>
<TR>
<TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD>
</TR>
<TR>
<TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD>
</TR>
<TR>
<TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
<TD>bbbbbbbb</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function gridScroll(oGrid,gridid){ var iX = oGrid.scrollLeft;

    var oHeader = document.getElementById(gridid + '_Header');
    oHeader.scrollLeft = iX;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    我要求下面的DIV滚动时。上面的DIV内的内容也滚动(这已实现了)。且两个表格的纵线始终对齐。（不对齐的地方在最后滚动条到头的一点。）
    <div id="dtgMain_Header" style="WIDTH:300px;HEIGHT:50px;overflow:scroll;" onscroll="gridScroll(this,'dtgMain')">
    <TABLE Width=500 id="dtgMain" border=1>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR></TABLE></div>
    <div style="WIDTH:300px;HEIGHT:50px;overflow:scroll" onscroll="gridScroll(this,'dtgMain')">
    <TABLE Width=500 id="dtgMain" border=1>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    </TABLE>
    </div>
    </BODY>
    </HTML>
      

  2.   

    这个问题主要是上面的表没有垂直的scroll，
    所以你给上面的div加上右边的scroll.
    那么就一定同宽了。
      

  3.   

    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function gridScroll(oGrid,gridid){ var iX = oGrid.scrollLeft;

    var oHeader = document.getElementById(gridid + '_Header');
    oHeader.scrollLeft = iX;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <div id="dtgMain_Header" style="WIDTH:300px;HEIGHT:50px;overflow:auto;" onscroll="gridScroll(this,'dtgMain')">
    <TABLE Width=500 id="dtgMain" border=1>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    </TABLE><BR></div>
    <div style="WIDTH:300px;HEIGHT:50px;overflow:auto" onscroll="gridScroll(this,'dtgMain')">
    <TABLE Width=500 id="dtgMain" border=1>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    </TABLE>
    </div>
    </BODY>
    </HTML>
      

  4.   

    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function gridScroll(oGrid,gridid){ var iX = oGrid.scrollLeft;

    //var oHeader = document.getElementById(gridid + '_Header');
    var oHeader = document.getElementById('dtgMain');
    //oHeader.scrollLeft = -1;
    oHeader.style.left = -iX;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <div id="dtgMain_Header" style="WIDTH:300px;HEIGHT:50px;overflow:auto" onscroll="gridScroll(this,'dtgMain')">
    <TABLE style="position:absolute" Width=500 id="dtgMain" border=1>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR></TABLE></div>
    <div style="WIDTH:300px;HEIGHT:50px;overflow:auto" onscroll="gridScroll(this,'dtgMain')">
    <TABLE Width=500 id="dtgMain" border=1>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    <TR>
    <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD> <TD>aaaaaaaaa</TD>
    <TD>bbbbbbbb</TD>
    </TR>
    </TABLE>
    </div>
    </BODY>
    </HTML>