Html示例-表格表头固定+首尾列固定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.table_wrap {
width: 100%;
height: 200px;
overflow: auto;
border-bottom:1px solid #61dafb;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #DDDDDD;
}
/* 表格th/td样式 */
td,th {
width: 150px;
box-sizing: border-box;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
/*单元格 超出长度 显示...*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 30px;
}
/* 表头固定 */
thead tr th {
position: sticky;
top: 0;
background: #F4F4F5;
height: 30px;
}
/* 首列固定/最后一列固定*/
th:first-child,
td:first-child,
th:last-child,
td:last-child {
position: sticky;
left: 0;
background: #F4F4F5;
text-align: center;
right: 0px;
border-left: 1px solid #DDDDDD ;
width: 100px;
}
/* 表头首列和最后一列强制最顶层 */
th:last-child,
th:first-child {
z-index: 3;
/*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
background: #F4F4F5;
}
</style>
</head>
<body>
<div class="table_wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>栏目1</th>
<th>栏目2</th>
<th>栏目3</th>
<th>栏目4</th>
<th>栏目2</th>
<th>栏目3</th>
<th>栏目4</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>4</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>5</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>6</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>7</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>8</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>9</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>10</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>11</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<!-- <tr>
<td>12</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>13</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>14</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">修改</a></td>
</tr>-->
</tbody>
</table>
</div>
</body>
</html>本文来自博客园，作者：꧁执笔小白꧂，转载请注明原文链接：https://www.cnblogs.com/qq2806933146xiaobai/p/18026764
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
2022-02-22 梦、清醒梦、梦魇
2022-02-22 弗洛伊德的本我、自我与超我概念
2021-02-22 3D成像技术
2021-02-22 3D显示技术
2021-02-22 学习模电与数电