一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。
效果
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border-collapse: collapse;
}
.sticky-table {
overflow: auto;
height: 100%;
/* 设置固定高度 */
border-left: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
width: 100%;
position: absolute
}
.sticky-table td,
.sticky-table th {
/* 设置td,th宽度高度 */
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
width: 150px;
min-width: 150px;
height: 30px;
padding: 5px;
position: relative;
}
.sticky-table th {
position: sticky;
top: 0;
z-index: 100;
/* 首行永远固定在头部 */
background-color: #eaf4ff;
/*设置表头背景色*/
background: #A0ADB5 !important;
}
.sticky-table td:first-child,
.sticky-table th:first-child {
position: sticky;
left: 0px;
/* 首列永远固定在左侧 */
z-index: 1;
background-color: #ffffff;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.sticky-table td:last-child,
.sticky-table th:last-child {
position: sticky;
right: 0px;
/* 首列永远固定在左侧 */
z-index: 20;
/* background-color: red; */
border-right: 0px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
background-color: #ffffff;
}
.sticky-table td:first-child:after,
.sticky-table th:first-child:after {
content: " ";
width: 5px;
height: 100%;
z-index: 2;
box-shadow: 1px 0px 10px rgb(0 0 0 / 5%), 5px 0px 5px rgb(0 0 0 / 8%), 2px 0px 4px -1px rgb(0 0 0 / 12%);
position: absolute;
top: 0;
right: 0px;
}
.sticky-table td:last-child:after,
.sticky-table th:last-child:after {
content: " ";
width: 5px;
height: 100%;
z-index: 2;
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.05), -4px 0px 5px rgba(0, 0, 0, 0.08), -2px 0px 4px -1px rgba(0, 0, 0, 0.12);
position: absolute;
top: 0;
left: 0px;
}
.sticky-table th:first-child,
.sticky-table th:last-child {
z-index: 200;
/*表头的首列要在上面*/
}
.sticky-table th>div {
width: 100%;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
}
/*.sticky-table table {
table-layout: fixed;
}*/
</style>
</head>
<body style="padding: 0px;margin: 0px;overflow:hidden;">
<div class="sticky-table">
<table>
<thead>
<tr>
<th>姓名</th>
<th>
<div>基本身体情况</div>
</th>
<th>
<div>体育特长能力</div>
</th>
<th>
<div>艺术审美</div>
</th>
<th>
<div>爱好特长</div>
</th>
<th>
<div>心理健康</div>
</th>
<th>
<div>自我调节</div>
</th>
<th>
<div>自信自强、诚实守信</div>
</th>
<th>
<div>文明素养、个人行为规范</div>
</th>
<th>
<div>爱国意识</div>
</th>
<th>
<div>责任心及服务意识</div>
</th>
<th>
<div>法律意识</div>
</th>
<th>
<div>环保意识</div>
</th>
<th>
<div>语言表达能力及口语特长</div>
</th>
<th>
<div>自我管理，自我激励</div>
</th>
<th>
<div>发展规划能力</div>
</th>
<th>
<div>信息技术能力</div>
</th>
<th>
<div>沟通能力</div>
</th>
<th>
<div>团队合作能力</div>
</th>
<th>
<div>企业文化学习</div>
</th>
<th>
<div>创新能力、解决问题能力</div>
</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
感谢
谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。
我是Nicnic，如果觉得写得可以的话，请点个赞吧❤。
写作不易，「点赞」+「在看」+「转发」 谢谢支持❤
