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

最新推荐文章于 2024-07-05 22:01:45 发布

最新推荐文章于 2024-07-05 22:01:45 发布 · 218 阅读

文章标签：

#CSS

html 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种将两个HTML表格合并显示为一个的效果，并确保标题列在滚动时保持可见的方法。通过调整样式和使用特定的HTML结构实现这一目标。

原理：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>