table表格css设置表头固定定位和前几列固定定位
2023-11-12 本文已影响0人
keknei
主要用到position: sticky这个css属性
html的table表格架构
<body>
<div id="app">
<div class="main">
<table cellspacing="0" >
<thead>
<tr>
<th> 1</th>
<th> 2</th>
<th> 3</th>
<th> 4</th>
<th>5 </th>
<th> 6</th>
<th>7 </th>
<th> 8</th>
<th> 9</th>
</tr>
</thead>
<tbody>
<tr>
<td> aasdaasdaasdaasdaasdaasdaasd</td>
<td> dvjh</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>aasdaasdaasdaasdaasdaasdaasd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasdaasdaasdaasdaasdaasdaasd</td>
<td> djhv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dvjh</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
<tr>
<td> aasd</td>
<td> dv</td>
<td> jh</td>
<td> nj</td>
<td>i </td>
<td>fd </td>
<td> xc</td>
<td> tyu</td>
<td>dfgvc </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
正常表格
- 先用
css设置表格表头thead tr th固定
.main{
width: 500px;
overflow:auto;
height:208px; /* 设置固定高度 */
}
td, th {
/* 设置td,th宽度高度 */
border:1px solid gray;
height:30px;
}
th {
background-color:lightblue;
}
thead tr th {
position:sticky;
top:0; /* 列首永远固定在头部 */
}
表头固定
- 设置表格前几列固定
如果表格的列的宽是不固定的，那么就要算出每列的宽度来给每列的left距离定位，设置每个tr下的td前几列定位,算出每列距离左边的距离，然后设置即可
不仅要设置td前几列的left距离定位，还要设置th的left距离定位
window.onload=function () {
const ths = document.querySelectorAll("thead th");
let thLeft = 0;
ths.forEach((th, index) => {
// 这里判断前几列设置定位
if (index < 2) {
th.style.position = "sticky";
th.style.left = thLeft + "px";
th.style.zIndex = 3;
thLeft += th.offsetWidth;
}
});
// tr有多少个
const trs = document.querySelectorAll("tbody tr");
trs.forEach(tr => {
let tdLeft = 0;
// 设置每个tr下的td前几列定位
const tds = tr.querySelectorAll("td");
tds.forEach((td, index) => {
// 这里判断前几列设置定位
if (index < 2) {
td.style.position = "sticky";
td.style.left = tdLeft + "px";
td.style.backgroundColor = "lightpink";
tdLeft += td.offsetWidth;
}
});
});
}
前两列固定
