原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死
程序员文章站
2022-05-25 19:50:20
需求的表格比较复杂（各种合并新增删除），elementUi的table组件无法满足需求，故而写了原生table，且与其他用了table组件的表格保持一致。 贴一下简单的代码，只实现操作按钮固定右侧以及底部滚动条功能： < ......
需求的表格比较复杂（各种合并新增删除），elementui的table组件无法满足需求，故而写了原生table，且与其他用了table组件的表格保持一致。
贴一下简单的代码，只实现操作按钮固定右侧以及底部滚动条功能：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
body {
width: 600px;
margin: 100px auto;
}
.fixedoper {
background-color: #fff;
position: absolute;
z-index: 100;
top: 0;
right: 0;
width: 104px;
height: 68px;
}
th,
td {
border: 1px solid #000;
height: 30px;
}
</style>
</head>
<body>
<!-- 第一层div固定宽度与定位 -->
<div style="width:100%;overflow-x: hidden;position: relative;">
<!-- 底部滚动条及样式 -->
<div style="width:100%;overflow-x: scroll;">
<!-- 表格宽度需大于父盒子的宽度才会出现滚动条 -->
<table style="width:120%;text-align: center;border-collapse: collapse;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th style="position: absolute;z-index: 1000;right: 0;top:-0.5px;
width: 100px;">操作</th>
width: 100px;">操作</th>
<th style="width:80px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>测试</td>
<td>测试</td>
<td>测试</td>
<td style="position: absolute;z-index: 1000;right: 0;top:33px;
width: 100px;">编辑</td>
width: 100px;">编辑</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
</script>
</html>
这里用div包裹table写定位的样式而不是直接在table上直接写定位，是为了避免ie浏览器卡死