<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>冻结第一行和第一列的表格</title>
<style>
/* 外层容器 */
.table-container {
width: 100%;
height: 300px; /* 设置高度，显示纵向滚动条 */
overflow: auto; /* 显示滚动条 */
position: relative;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 800px; /* 设置最小宽度，显示横向滚动条 */
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
/* 冻结第一行 */
thead {
position: sticky;
top: 0;
background-color: #f1f1f1;
z-index: 2;
}
/* 冻结第一列 */
td, th {
position: relative;
}
td:first-child, th:first-child {
position: sticky;
left: 0;
background-color: #f1f1f1;
z-index: 1;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>职业</th>
<th>邮箱</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
<td>工程师</td>
<td>zhangsan@example.com</td>
<td>1234567890</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
<td>设计师</td>
<td>lisi@example.com</td>
<td>2345678901</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>广州</td>
<td>程序员</td>
<td>wangwu@example.com</td>
<td>3456789012</td>
</tr>
<tr>
<td>赵六</td>
<td>40</td>
<td>深圳</td>
<td>经理</td>
<td>zhaoliu@example.com</td>
<td>4567890123</td>
</tr>
<tr>
<td>孙七</td>
<td>29</td>
<td>成都</td>
<td>产品经理</td>
<td>sqi@example.com</td>
<td>5678901234</td>
</tr>
<tr>
<td>钱八</td>
<td>38</td>
<td>杭州</td>
<td>测试工程师</td>
<td>qianba@example.com</td>
<td>6789012345</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
<tr>
<td>刘九</td>
<td>45</td>
<td>武汉</td>
<td>销售</td>
<td>liujiu@example.com</td>
<td>7890123456</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
