关于如何使⽤原⽣实现表格固定列，纯CSS实现
在使⽤ HTML 的表格标签时，当表格项过多时，左右拉动时，希望固定⼏列不随⽔平滚动条滚动，表头也不随竖直⽅向滚动⽽滚动。在使⽤组件库的时候，通常都有成熟的API。
思路⼀： 是在查资料中发现的，创建多个 table 将⾸尾需要固定的列使⽤单独的表格，然后对需要固定的列所在表格添加position: absolute，本⼈想通过⼀个表格实现，未使⽤该⽅法。
思路⼆： 通过position: sticky 实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"href="./css.css">
<script src="cdn.bootcss/xlsx/0.11.in.js"></script>
</head>
<body>
<div id="table-to-excel">导出Excel</div>
<div class="contain">
<div class="table-self"id="table-outlayer">
<table class="table">
<thead class="tb-thead">
<tr class="tr-th">
<th class="th">
<div>列⼀</div>
</th>
<th class="th"id="th-2">
<div>列⼆</div>
</th>
<th class="th">
<div>列三</div>
</th>
<th class="th">
<div>列四</div>
</th>
<th class="th">
<div>列五</div>
</th>
<th class="th">
<div>列六</div>
</th>
<th class="th">
<div>列七</div>
</th>
<th class="th">
<div>列⼋</div>
</th>
<th class="th">
<div>列九</div>
</th>
<th class="th">
<div>列⼗</div>
</th>
<th class="th"id="th-11">
</thead>
<tbody class="tb-tbody">
<tr class="tr-tb">
<td class="td">⾏⼀列⼀</td>
<td class="td"id="1-2">⾏⼀列⼆</td>
<td class="td">⾏⼀列三</td>
<td class="td">⾏⼀列四</td>
<td class="td">⾏⼀列五</td>
<td class="td">⾏⼀列六</td>
<td class="td">⾏⼀列七</td>
<td class="td">⾏⼀列⼋</td>
<td class="td">⾏⼀列九</td>
<td class="td">⾏⼀列⼗</td>
<td class="td"id="1-11">⾏⼀列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏⼆列⼀</td>
<td class="td"id="2-2">⾏⼆列⼆</td>
<td class="td">⾏⼆列三</td>
<td class="td">⾏⼆列四</td>
<td class="td">⾏⼆列五</td>
<td class="td">⾏⼆列六</td>
<td class="td">⾏⼆列七</td>
<td class="td">⾏⼆列⼋</td>
<td class="td">⾏⼆列九</td>
<td class="td">⾏⼆列⼗</td>
<td class="td"id="2-11">⾏⼆列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏三列⼀</td>
<td class="td"id="3-2">⾏三列⼆</td>
<td class="td">⾏三列三</td>
<td class="td">⾏三列四</td>
<td class="td">⾏三列五</td>
<td class="td">⾏三列六</td>
<td class="td">⾏三列七</td>
<td class="td">⾏三列⼋</td>
<td class="td">⾏三列九</td>
<td class="td">⾏三列⼗</td>
<td class="td"id="3-11">⾏三列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏四列⼀</td>
<td class="td"id="4-2">⾏四列⼆</td>
<td class="td">⾏四列三</td>
<td class="td">⾏四列四</td>
<td class="td">⾏四列五</td>
<td class="td">⾏四列六</td>
<td class="td">⾏四列七</td>
<td class="td">⾏四列⼋</td>
<td class="td">⾏四列九</td>
<td class="td">⾏四列⼗</td>
<td class="td"id="4-11">⾏四列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏五列⼀</td>
<td class="td"id="5-2">⾏五列⼆</td>
<td class="td">⾏五列三</td>
<td class="td">⾏五列四</td>
<td class="td">⾏五列五</td>
<td class="td">⾏五列六</td>
<td class="td">⾏五列七</td>
<tr class="tr-tb">
<td class="td">⾏六列⼀</td>
<td class="td"id="6-2">⾏六列⼆</td>
<td class="td">⾏六列三</td>
<td class="td">⾏六列四</td>
<td class="td">⾏六列五</td>
<td class="td">⾏六列六</td>
<td class="td">⾏六列七</td>
<td class="td">⾏六列⼋</td>
<td class="td">⾏六列九</td>
<td class="td">⾏六列⼗</td>
<td class="td"id="6-11">⾏六列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏七列⼀</td>
<td class="td"id="7-2">⾏七列⼆</td>
<td class="td">⾏七列三</td>
<td class="td">⾏七列四</td>
<td class="td">⾏七列五</td>
<td class="td">⾏七列六</td>
<td class="td">⾏七列七</td>
<td class="td">⾏七列⼋</td>
<td class="td">⾏七列九</td>
<td class="td">⾏七列⼗</td>
<td class="td"id="7-11">⾏七列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏⼋列⼀</td>
<td class="td"id="8-2">⾏⼋列⼆</td>
<td class="td">⾏⼋列三</td>
<td class="td">⾏⼋列四</td>
<td class="td">⾏⼋列五</td>
<td class="td">⾏⼋列六</td>
<td class="td">⾏⼋列七</td>
<td class="td">⾏⼋列⼋</td>
<td class="td">⾏⼋列九</td>
<td class="td">⾏⼋列⼗</td>
<td class="td"id="8-11">⾏⼋列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏九列⼀</td>
<td class="td"id="9-2">⾏九列⼆</td>
<td class="td">⾏九列三</td>
<td class="td">⾏九列四</td>
<td class="td">⾏九列五</td>
<td class="td">⾏九列六</td>
<td class="td">⾏九列七</td>
<td class="td">⾏九列⼋</td>
<td class="td">⾏九列九</td>
<td class="td">⾏九列⼗</td>
<td class="td"id="9-11">⾏九列⼗⼀</td> </tr>
<tr class="tr-tb">
<td class="td">⾏⼗列⼀</td>
<td class="td"id="10-2">⾏⼗列⼆</td> <td class="td">⾏⼗列三</td>
<td class="td">⾏⼗列四</td>
<td class="td">⾏⼗列五</td>
<td class="td">⾏⼗列六</td>
<td class="td">⾏⼗列七</td>
</tbody>
</table>
</div>
</div>
<script>
console.log('click');
let tableDom = ElementById("table-outlayer");
let blob =toSheet(XLSX.utils.table_to_sheet(tableDom));
let a = ateElement("a");// 创建a标签
a.download ="下载表格.xlsx";// 设置下载的表格名
a.href = ateObjectURL(blob);// 设置a标签的链接
document.body.appendChild(a);// 将a标签添加到页⾯
a.click();// 设置a标签触发点击事件
veChild(a);//移除a标签
})
function toSheet(sheet, sheetName){
sheetName = sheetName ||"sheet1";
var workbook ={
SheetNames:[sheetName],
Sheets:{},
};
workbook.Sheets[sheetName]= sheet;
// ⽣成excel的配置项
var wopts ={
bookType:"xlsx",// 要⽣成的⽂件类型
bookSST:false,// 是否⽣成Shared String Table，官⽅解释是，如果开启⽣成速度会下降，但在低版本IOS设备上有更好的兼容性
type:"binary",
};
var wbout =XLSX.write(workbook, wopts);
var blob =new Blob([s2ab(wbout)],{
type:"application/octet-stream;charset=utf-8",
});
// 字符串转ArrayBuffer
function s2ab(s){
var buf =new ArrayBuffer(s.length);
var view =new Uint8Array(buf);
for(var i =0; i != s.length;++i) view[i]= s.charCodeAt(i)&0xff;
return buf;
}
return blob;
}
window.addEventListener("scroll",function scroll(){
console.ElementById("table-outlayer").clientWidth);
console.ElementById("table-outlayer").scrollWidth);
css设置表格滚动条console.ElementById("table-outlayer").scrollLeft);
ElementById("table-outlayer").clientWidth ===
// 不存在⽔平⽅向的滚动
return
}else{
// 滚动条在最左边时
ElementById("table-outlayer").scrollLeft ===0){
for(let tbLine =0; tbLine <=10; tbLine++){
}
}else{
for(let tbLine =0; tbLine <=10; tbLine++){
}
}
// 滚动条在最右边时
ElementById("table-outlayer").scrollLeft +
for(let tbLine =0; tbLine <=10; tbLine++){
for(let tbLine =0; tbLine <=10; tbLine++){
}
}
}
},
true)
</script>
</body>
</html>
css 代码
.contain {
position: relative;
width: 1400px;
height: 600px;
}
.contain .table-self {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 500px;
overflow: auto;
border: 1px solid #e8e8e8;
background-color: #fff;
}
.contain .table-self .table {
position: relative;
left: 0;
top: 0;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-spacing: 0;
border-collapse: separate;
text-align: center;
}
.contain .table-self .table .tb-thead {
position: relative;
left: 0;
top: 0;
}
/* // 表格表头第⼀⾏不随竖直⽅向滚动条滚动 */
.contain .table-self .table .tb-thead .tr-th .th {
z-index: 99;
position: sticky;
left: 0;
top: 0;
padding: 16px;
border-left: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
color: #000000d9;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论