table表格固定表头，内容滚动显示

最新推荐文章于 2023-09-28 10:46:09 发布

gyuei

最新推荐文章于 2023-09-28 10:46:09 发布

阅读量1.6k

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/gyueh/article/details/104904065

版权

Bootstrap 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

目的：做一个table表格，实现固定标题行而内容可滚动

html部分代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="conatiner table-responsive">
			<!-- table-striped使得奇数行的背景色变为灰色 -->
			<table class="table table-striped hx-table-fixed-title">
				<thead class="hx-table-fixedThead">
					<tr>
						<th>
							<input type="checkbox" name="" id="" value="" class="table-input-box"/>
						</th>
						<th>车牌号</th>
						<th>订阅起订时间</th>
						<th>订阅结束时间</th>
						<th>订阅类型(最近一次)</th>
					</tr>
				</thead>
				<tbody class="hx-table-scrollTbody">
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr><tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td>
						<td>张三</td>
						<td>2020-03-01 16:00:13</td>
						<td>2021-03-01 16:00:13</td>
						<td>包月</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
</html>

css部分代码如下所示：

.hx-table-fixed-title {
	width: 800px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-collapse: collapse;
	border-spacing: 0;
}
.hx-table-fixedThead{
	display: block;
	width: 100%;
}
.hx-table-scrollTbody {
	display: block;
	max-height: 350px;
	overflow: auto;
	width: 100%;
	border: 1px solid #DDDDDD;
}
.hx-table-fixed-title td,
.hx-table-fixed-title th {
	text-align: center;
	padding: 2px 3px 3px 4px;
}
.hx-table-fixed-title tr {
	border: 1px solid #cccccc;
}
.hx-table-fixed-title tbody tr{
	border-left: none;
}
.hx-table-fixedThead tr th:last-child {
	width: 218px;
}
 .hx-table-fixed-title tbody tr td:not(:first-child){
	text-align: center;
	width: 200px;
}
.hx-table-fixed-title thead tr th:not(:first-child){
	text-align: center;
	width: 200px;
}
.hx-table-fixed-title .table-input-box{
	width: 14px;
	height: 14px;
	border-radius:2px;
	background-color:none;
	border: 1px solid #2DA7E0;
	zoom: 1;
	outline: none;
	-webkit-appearance:none;/*去除默认样式*/
	-webkit-appearance:none;
	-moz-appearance:none;
	-o-appearance:none;
	-ms-appearance:none;
}
.hx-table-fixed-title .table-input-box:checked{
	background:#2ea7e0 ;
}
.hx-table-fixed-title tbody tr td:last-of-type{
	color: #2ea7e0;
}

注意：margin: 0 auto;也能使某个块级元素在页面居中显示

最终效果如图所示：
在这里插入图片描述

gyuei

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
table表格固定表头，内容滚动显示

目的：做一个table表格，实现固定标题行而内容可滚动html部分代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href...
复制链接

扫一扫