两个table合龙成一个table 标题列不滚动

两个table合并成一个table 标题列不滚动

原理：style="margin-top:-2"避免两个table的border叠加效果。

 

<style type="text/css">
	td{
			border:1px black solid; 
			text-align:center;
		}   
</style> 
  
  两个table显示成一个table效果,标题列不滚动：<BR>
	 <table border="1" cellspacing="0" width="500px" style="border-color:black;" >  
        <tr><td width="20%">标题1</td><td width="20%">标题2</td><td width="20%">标题3</td><td width="20%">标题4</td></tr>  
    </table>    
	<div id="tb" style="height:100px;overflow-y:scroll;display:block;margin-top:-2;">
  	<table border="1" cellspacing="0" width="500px" style="border-color:black;" >  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
        <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>  
    </table>   
	</div>