table表头固定并添加滚动条

最新推荐文章于 2024-05-11 15:19:17 发布

Muscleheng

最新推荐文章于 2024-05-11 15:19:17 发布

阅读量1.1w

点赞数 2

分类专栏： web前端文章标签： html 表头锁定 table 添加滚动条

本文链接：https://blog.csdn.net/Muscleheng/article/details/86715733

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现表头锁定的方式很多，这里这种方式是比较简单，并且是没有任何问题的；

完整代码示例：

<!DOCTYPE html> <!-- 不加此标签，IE不生效 -->
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
    <title>表头锁定</title>
</head>
<style>
.myTable tbody {
	display:block;
	height:250px;
	width:900px;
	overflow-y:scroll;
	text-align: center;
}

.myTable thead, tbody tr {
	display:table;
	width:900px;
	table-layout:fixed;
}

.myTable thead {
	background: #E4E8F3;
    color: black;
}
.myTable thead tr th{
	text-align: center;
}
</style>
<body>
        <div id="div_1" style="padding: 1px 15px 15px 15px;margin-top: 50px; ">
				<table class="myTable"  id="nav_tab" border="1">
                <thead >
                    <tr>
                    	<th >头字段1</th>
                    	<th >头字段2</th>
                    	<th >头字段3</th>
                    	<th >头字段4</th>
                    	<th >头字段5</th>
                </thead>			
					<tbody id="nav_tab_tbd">
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>88888</td><td>88888</td><td>88888</td><td>88888</td><td>88888</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>99999</td><td>99999</td><td>99999</td><td>99999</td><td>99999</td></tr>
							<tr><td>22222</td><td>22222</td><td>22222</td><td>22222</td><td>22222</td></tr>
							<tr><td>22222</td><td>22222</td><td>22222</td><td>22222</td><td>22222</td></tr>
					</tbody>

				</table>
        </div>
</body>
</html>

Muscleheng

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
table表头固定并添加滚动条

实现表头锁定的方式很多，这里这种方式是比较简单，并且是没有任何问题的；完整代码示例：&lt;!DOCTYPE html&gt; &lt;!-- 不加此标签，IE不生效 --&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; &lt;me
复制链接

扫一扫

专栏目录