IE浏览器兼容tbody显示滚动条

最新推荐文章于 2021-07-16 00:53:10 发布

原创最新推荐文章于 2021-07-16 00:53:10 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

前端日记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了解决IE浏览器中thead不显示滚动条，而tbody显示滚动条的问题。通过将thead和tbody包裹在不同的div中，并设置特定样式，实现跨浏览器兼容的表格滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目组没有前端，所以既需要写后台，也需要写前端页面。当然就需要考虑一下浏览器的兼容性，谷歌浏览器的兼容性就是好，怎么写都行。IE浏览器就要差很多了。今天介绍一下怎么解决thead不显示滚动条，tbody显示滚动条。
我做的是一个弹窗，弹窗里面显示一个表格，要求thead的标题不显示滚动条，tbody显示滚动条。查了一下资料，直接在tbody中加了一个style="max-height: 240px;overflow-y:auto;，在谷歌浏览器中显示是正常的，但是后来测试同事告诉我在IE浏览器中不正常，不显示滚动条。
在网上查了一些资料说，IE浏览器不支持在tbody中直接添加overflow样式，需要使用两个div分别把thead和tbody包起来，变成下面的形式。

<div>
   <table id="record">
      <thead style="display: block;">
         <tr class="m2th">
            <td width="200px" class="center">姓名</td>
       	     <td width="200px" class="center">年龄</td>
		 </tr>
		</thead>
	</table>
</div>
<div style="max-height: 240px;overflow-y:auto;">	 			
  	<table>
  	    <tbody> 
  	       <tr>
  	          <td width="200px" class="center">张三</td>      	  
  	          <td width="200px" class="center">李四</td>      
  	          <td width="200px" class="center">王五</td>      	  
  	          <td width="200px" class="center">赵六</td>      	 
  	          <td width="200px" class="center">小明</td>      	  
  	          <td width="200px" class="center">小强</td>      	
  	       </tr> 	 
  	     <tbody>
    </table>
</div>