css粘性定位sticky固定表格列吸顶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" >
<table >
<tbody>
<tr>
<td class="td1">序号</td>
<td class="td2">姓名</td>
<td >语⽂</td>
<td >数学</td>
<td >英语</td>
<td >化学</td>
<td >⽣物</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>
<td>87</td>
</tr>
<tr>
<td class="td1">4</td>
<td class="td2">赵六</td>
<td>98</td>
<td>87</td>css固定定位
<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 >
<div >
</div>
<div >
粘性定位吸在顶部
</div>
<div > </div>
<div >
</div>
<div >
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。