关于如何使用原生实现表格固定列，纯 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="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.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"><div>列十一</div></th></tr></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><td class="td">行五列八</td><td class="td">行五列九</td><td class="td">行五列十</td><td class="td" id="5-11">行五列十一</td></tr><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><td class="td">行十列八</td><td class="td">行十列九</td><td class="td">行十列十</td><td class="td" id="11-11">行十列十一</td></tr></tbody></table></div></div><script>document.getElementById('table-to-excel').addEventListener('click', function () {console.log('click');let tableDom = document.getElementById("table-outlayer");let blob = toSheet(XLSX.utils.table_to_sheet(tableDom));let a = document.createElement("a"); // 创建a标签a.download = "下载表格.xlsx"; // 设置下载的表格名a.href = window.URL.createObjectURL(blob); // 设置a标签的链接document.body.appendChild(a); // 将a标签添加到页面a.click(); // 设置a标签触发点击事件document.body.removeChild(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",});// 字符串转ArrayBufferfunction 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.log(document.getElementById("table-outlayer").clientWidth);console.log(document.getElementById("table-outlayer").scrollWidth);console.log(document.getElementById("table-outlayer").scrollLeft);if (document.getElementById("table-outlayer").clientWidth ===document.getElementById("table-outlayer").scrollWidth) {// 不存在 水平方向的滚动return} else {// 滚动条在最左边时if (document.getElementById("table-outlayer").scrollLeft === 0) {document.getElementById("th-2").style.boxShadow = "none"for (let tbLine = 0; tbLine <= 10; tbLine++) {document.getElementById(`${tbLine+1}-2`) ? document.getElementById(`${tbLine+1}-2`).style.boxShadow = "none" : ""}} else {document.getElementById("th-2").style.boxShadow = "4px 0 4px -2px #ccc"for (let tbLine = 0; tbLine <= 10; tbLine++) {document.getElementById(`${tbLine+1}-2`) ? document.getElementById(`${tbLine+1}-2`).style.boxShadow = "4px 0 4px  -2px #ccc" :""}}// 滚动条在最右边时if (document.getElementById("table-outlayer").scrollLeft +document.getElementById("table-outlayer").clientWidth ===document.getElementById("table-outlayer").scrollWidth) {document.getElementById("th-11").style.boxShadow = "none"for (let tbLine = 0; tbLine <= 10; tbLine++) {document.getElementById(`${tbLine+1}-11`) ? document.getElementById(`${tbLine+1}-11`).style.boxShadow = "none" : ""}} else {document.getElementById("th-11").style.boxShadow = "-4px 0 4px -2px #ccc"for (let tbLine = 0; tbLine <= 10; tbLine++) {document.getElementById(`${tbLine+1}-11`) ? document.getElementById(`${tbLine+1}-11`).style.boxShadow ="-4px 0 4px -2px #ccc" : ""}}}},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;font-size: 14px;line-height: 1.5;font-weight: 500;background-color: #fafafa;word-break: break-word;overflow-wrap: break-word;
}.contain .table-self .table .tb-thead .tr-th .th div {width: 200px;
}/* // 表格表头第一行, 第一列 不随水平方向滚动条滚动 */.contain .table-self .table .tb-thead .tr-th .th:first-child {position: sticky;left: 0;top: 0;z-index: 999;border-left: none;
}/* // 表格表头第一行, 第二列 不随水平方向滚动条滚动 */.contain .table-self .table .tb-thead .tr-th .th:nth-child(2) {position: sticky;left: 232px;/* 第二列left 的距离要是第一列的宽度 */top: 0;z-index: 998;
}.contain .table-self .table .tb-thead .tr-th .th:nth-last-child(2) {border-right: 1px solid #e8e8e8;
}/* // 表格表头第一行, 最后一列 不随水平方向滚动条滚动 */.contain .table-self .table .tb-thead .tr-th .th:last-child {position: sticky;right: 0;top: 0;z-index: 999;border-left: none;box-shadow: -4px 0 4px -2px #ccc;
}.contain .table-self .table .tb-tbody .tr-tb .td {padding: 16px;border-left: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;color: #000000a6;font-size: 14px;line-height: 1.5;background-color: #fff;
}/* // 表格内容第一列不随水平方向滚动条滚动 */.contain .table-self .table .tb-tbody .tr-tb .td:first-child {position: sticky;left: 0;top: 0;z-index: 9;border-left: none;border-top: none;
}/* // 表格内容第二列不随水平方向滚动条滚动 */.contain .table-self .table .tb-tbody .tr-tb .td:nth-child(2) {position: sticky;left: 232px;/* 第二列的 left 的距离要是第一列的宽度 */top: 0;z-index: 8;border-top: none;
}.contain .table-self .table .tb-tbody .tr-tb .td:nth-last-child(2) {border-right: 1px solid #e8e8e8;
}/* // 表格内容最后一列不随水平方向滚动条滚动 */.contain .table-self .table .tb-tbody .tr-tb .td:last-child {position: sticky;right: 0;top: 0;z-index: 9;border-left: none;box-shadow: -4px 0 4px -2px #ccc;
}

其中附带了到处excel功能

关于如何使用原生实现表格固定列，纯 CSS 实现相关推荐

elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
element表格固定某一行_element 表格固定列
业务场景:表格展示数据较多,在有限的空间展示过多的数据解决:使用表格固定列(固定列之所以能固定,是因为生成了2个表格,一个用来固定,一个用来滚动), 按照文档介绍固定列需要使用fixed属性,它接受 ...
使用antd表格固定列后行与行之间对不齐
在公司写项目时用了antd的表格固定列,发现固定的列与没有固定的列对不齐在css里加上这段,高度调整到跟未固定列一致即可. >>>.ant-table-thead tr{heigh ...
HTML中表格固定列锁定
本文主要介绍通过css实现表格固定列锁定及锁定后左右两个表格高度一致. 一.实现表格固定列的原理是,通过两个div,固定列div的css float设置成left,非固定列css overflow-x ...
label居中_表格固定列宽时如何居中？
列宽固定居中的设置的时候,我们通常使用 p{宽度} 来指定固定的列宽,这时单元格会自动换行,换行之后是左对齐的,如何获得居中对齐呢? \begin{tabular}{|p{54pt}l|p{71pt} ...
关于js表格固定列实现
一.概述在开发过程中前端列表展示数据对比查看的情况是比较常见的,我最近接到的一个任务就是要处理这样的数据:一般这种需求将某一列或几列进行横向固定然后其它不固定的列可以照常实现x轴的滚动: 话不多说先 ...
Element 表格固定列横向滚动条无法拖动的问题解决
在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条. 方案一:修改el-table__body-wrapper样式的层级,随便设个层级 ...
elementui表格固定列之后行错位解决
项目场景 elementui表格在使用的固定列之后,当出现滚动条时,滚动到最后一条数据会发现对不齐. 解决方案: /** *offset //对齐的高度 **/ function elementFix ...
解决element UI table 表格固定列单元格错位
最近在使用表格组件的固定列后,才发现表格有样式bug,在使用点击事件切换表格尺寸大小时,会发现固定列样式没有对齐,在切换页面之后,就会出现列错误的现象,如下: 解决方法: 1.给表格添加ref < ...

关于如何使用原生实现表格固定列，纯 CSS 实现

关于如何使用原生实现表格固定列，纯 CSS 实现相关推荐

最新文章

热门文章