固定表头和第一列表格的实现

lzugis

发布于 2019-06-14 21:04:21

4.8K0

发布于 2019-06-14 21:04:21

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。

效果

实现思路

1.区域划分

如下图，将整个表格分为四个区域：1、左上区域需要单独出来，因为此区域不参与滚动；2、上部表头，需要固定在顶部并且参与横向滚动；3、左边表头，需要滚动并且参与竖向滚动；4、表格主区域，会有横竖向的滚动，控制顶部和左边的表头。

2.关键点

table的th或者td里面套一个div并设置宽度，目的是为了撑开table的表格，因为单独给th或者td是不起作用的。

实现代码

@charset "utf-8";

.container {
  font-size: 12px;
  width: 600px;
  overflow: hidden;
  .table {
    width: 100%;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    th,
    td {
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      div {
        height: 20px;
        line-height: 20px;
        width: 60px;
        white-space: nowrap;
      }
    }
  }
  .table-title,
  .table-content {
    float: left;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: #F9F9F9;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
      background-color: #999;
    }
  }
  .table-title {
    width: 60px;
  }
  .top-title {
    width: calc(100% - 66px);
    overflow: hidden;
  }
  .left-title {
    max-height: 200px;
    overflow: hidden;
  }
  .table-content {
    position: relative;
    width: calc(100% - 60px);
    max-height: 206px;
    overflow: auto;
  }
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--jquery-->
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
		<!--easyui-->
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="container">
			<div>
				<div class="table-title">
					<table class="table" cellpadding="0" cellspacing="0">
						<tr><th><div>商品名称</div></th></tr>
					</table>
				</div>
				<div class="table-content top-title" id="topTitle">
					<table class="table" cellpadding="0" cellspacing="0">
						<tr>
							<th><div>属性1</div></th>
							<th><div>属性2</div></th>
							<th><div>属性3</div></th>
							<th><div>属性4</div></th>
							<th><div>属性5</div></th>
							<th><div>属性6</div></th>
							<th><div>属性7</div></th>
							<th><div>属性8</div></th>
							<th><div>属性9</div></th>
							<th><div>属性10</div></th>
							<th><div>属性11</div></th>
							<th><div>属性12</div></th>
							<th><div>属性13</div></th>
							<th><div>属性14</div></th>
							<th><div>属性15</div></th>
							<th><div>属性16</div></th>
							<th><div>属性17</div></th>
							<th><div>属性18</div></th>
							<th><div>属性19</div></th>
							<th><div>属性20</div></th>
						</tr>
					</table>
				</div>
			</div>
			
			<div>
				<div class="table-title left-title" id="leftTitle">
					<table class="table" cellpadding="0" cellspacing="0">
						<tr><th><div>商品1</div></th></tr>
						<tr><th><div>商品2</div></th></tr>
						<tr><th><div>商品3</div></th></tr>
						<tr><th><div>商品4</div></th></tr>
						<tr><th><div>商品5</div></th></tr>
						<tr><th><div>商品6</div></th></tr>
						<tr><th><div>商品7</div></th></tr>
						<tr><th><div>商品8</div></th></tr>
						<tr><th><div>商品9</div></th></tr>
						<tr><th><div>商品10</div></th></tr>
						<tr><th><div>商品11</div></th></tr>
						<tr><th><div>商品12</div></th></tr>
						<tr><th><div>商品13</div></th></tr>
						<tr><th><div>商品14</div></th></tr>
						<tr><th><div>商品15</div></th></tr>
					</table>
				</div>
				<div class="table-content" id="content">
					<table class="table" cellpadding="0" cellspacing="0">
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
						<tr>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
							<td><div>属性</div></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<script>
			$("#content").scroll(function() {
				$("#topTitle").scrollLeft($("#content").scrollLeft());
				$("#leftTitle").scrollTop($("#content").scrollTop());
			});
		</script>
	</body>
</html>

技术博客 CSDN：http://blog.csdn.NET/gisshixisheng 在线教程 https://edu.csdn.net/course/detail/799 https://edu.csdn.net/course/detail/7471

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019年06月01日，如有侵权请联系 cloudcommunity@tencent.com 删除

https