当前位置: 代码迷 >> Web前端 >> 两个table合龙成一个table 标题列不滚动
  详细解决方案

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

热度:158   发布时间:2012-11-13 10:00:50.0
两个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>

?

?

  相关解决方案