sticky粘性定位固定在火狐上面也不会出现表格抖动
1,表格固定列 前两列固定
直接复制测试
<html>
<head>
<meta charset="UTF-8">
<title>粘性定位sticky固定表格列</title>
</head>
<style>
.td1{
position: sticky;
z-index: 1;
left:10px;
background-color: #fff;
}
.td2{
position: sticky;//粘性定位
z-index: 1;
left:82px;//可根据表格本身计算
background-color: #fff;
}
</style>
<body>
<div id="tableDiv" style="width:500px;overflow-x:auto;">
<table style="width:800px;">
<tbody>
<tr>
<td style="width:80px;" class="td1">序号</td>
<td style="width:80px;" class="td2">姓名</td>
<td style="width:100px;">语文</td>
<td style="width:100px;">数学</td>
<td style="width:100px;">英语</td>
<td style="width:100px;">化学</td>
<td style="width:100px;">生物</td>
</tr>
<tr>
<td class="td1">1</td>
<td class="td2">张三</td>
<td>98</td>
<td>87</td>
<td>66</td>
<td>87</td>
</tr>
<tr>
<td class="td1">2</td>
<td class="td2">里斯</td>
<td>98</td>
<td>87</td>
<td>66</td>
<td>87</td>
<td>87</td>
</tr>
<tr>
<td class="td1">3</td>
<td class="td2">王五</td>
<td>98</td>
<td>87</td>
<td>66</td>
<td>87</td>
<td>87</td>
</tr>
<tr>
<td class="td1">4</td>
<td class="td2">赵六</td>
<td>98</td>
<td>87</td>
<td>66</td>
<td>66</td>
<td>87</td>
</tr>
<tr>
<td class="td1">5</td>
<td class="td2">张三</td>
<td>98</td>
<td>87</td>
<td>87</td>
<td>66</td>
<td>87</td>
</tr>
<tr>
<td class="td1">6</td>
<td class="td2">小芳</td>
<td>98</td>
<td>87</td>
<td>87</td>
<td>66</td>
<td>87</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
2,粘性定位吸顶
<html>
<head>
<meta charset="UTF-8">
<title>粘性吸顶</title>
</head>
<style>
</style>
<body>
<div style="height: 500px;border:1px solid;overflow: scroll">
<div style="height:600px;border: 1px solid yellowgreen">
</div>
<div style="height:50px;background-color: #1db6ff;position: sticky;top:0">
粘性定位吸在顶部
</div>
<div style="height:600px;border: 1px solid yellowgreen;background-color: #ddddee">
</div>
<div style="height:50px;background-color: #ff8687;">
</div>
<div style="height:600px;border: 1px solid yellowgreen">
</div>
</div>
</body>
</html>