table固定表头、固定列

最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。

使用position:sticky来固定表头

html:

<div id="common-table"><table id="table-container" cellpadding="0" cellspacing="0" border="0"><thead><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></tbody></table></div>

CSS样式

#common-table {width: 100%;height: 500px;overflow: hidden;}#table-container {height: 400px;overflow-y: auto;display: block;width: 100%;table-layout: fixed;}#table-container thead {border-left: 1px solid #DFE2EB;border-top: 1px solid #DFE2EB;position: sticky;top: 0;left: 0;right: 0;display: table;width: 100%;table-layout: fixed;}#table-container thead tr>th {background-color: #fafafa;font-size: 14px;font-family: Microsoft YaHei UI;font-weight: bold;color: #333333;border-bottom: 1px solid #DFE2EB;border-right: 1px solid #DFE2EB;padding: 15px;}#table-container thead tr>th>div {padding: 5px 10px;min-width: 40px;display: flex;align-items: center;justify-content: center;}#table-container tbody {border-left: 1px solid #DFE2EB;display: table;width: 100%;table-layout: fixed;}#table-container tbody tr>td {font-size: 12px;font-family: Microsoft YaHei UI;font-weight: 400;padding: 13px;}#table-container td,#table-container th {border-bottom: 1px solid #DFE2EB;border-right: 1px solid #DFE2EB;text-align: center;padding: 5px;}

利用transform固定表头
通过监听滚动事件，滚动多少PX，就把表头垂直移动多少PX

this.$el.find("#table-container").scroll(function () {this.$el.find("#table-container thead").css('transform', 'translate(0, ' + this.scrollTop + 'px)')
});

—> 利用transform固定表头，滚动页面时会出现边框线丢失的问题，此时需要给 table这一层加上css属性：border-collapse: separate;
3. 固定列

const target = me.$el.find("#depRosterPep")
const columnDom = target.find("tr td:nth-child(-n+2).table-cell-fix, tr:nth-child(1) th:nth-child(-n+2).table-cell-fix");
target.scroll(function (e) {//水平滚动时，加上阴影效果，否则去除阴影效果this.scrollLeft == 0 && target.find('table').removeClass('table-fix') || target.find('table').addClass('table-fix')//固定列if(this.scrollLeft != me.scroll_x) {me.scroll_x = this.scrollLeftfor (let i = 0; i < columnDom.length; i++) {columnDom.eq(i).css('transform', `translateX(${me.scroll_x}px)`)}}//固定表头if(this.scrollTop != me.scroll_y) { me.scroll_y = this.scrollToptarget.find("table thead").css('transform', `translate3d(0, ${me.scroll_y}px, .1px)`)}
});

固定列样式

#depRosterPep .table-fix .table-cell-fix-last::after {box-shadow: inset 12px 0 8px -8px #00000026;
}
#depRosterPep .table-cell-fix-last::after {content: "";position: absolute;top: 0;right: 0;bottom: -1px;width: 30px;transform: translate(100%);transition: box-shadow .3s;pointer-events: none;
}

table固定表头、固定列相关推荐

el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
bootstrap-table固定表头固定列
bootstrap-table固定表头固定列 1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-tabl ...
bootstrap表头如何展示不动_bootstrap-table固定表头固定列
1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js data-tog ...
vue表格实现固定表头首列
下载地址 vue表格实现固定表头首列 dd:
html 把table固定住,html Table实现表头固定
合同号签约客户发布客户合同状态选定条件的发布周期额度看看css *{ padding:0; margin:0; } th{ border:1px solid #e6e6e6; line-height ...
element表格固定表头每列宽度，最右侧固定后，溢出出现滚动条内容和表头不能同时移动
当最右侧固定,前面因为设置了固定宽度,所以宽度不够就会出现滚动条,但是我们发现,出现滚动条的时候,只是内容向右滑动了,表头固定没有变,被固定最右侧的订单号列遮挡此时发现因为设置了 overflow: ...
Excel2007中固定表头或列
当我们使用excel在制作表格时,数据量较大,如何使表头固定不动,其内容可以上下滚动呢? 首先,选择视图"View" 选中 Freeze Panes 可以根据实际情况选择固定表头. ...
小程序绘制表格table（表头固定，可上下左右滑动）
某天在写小程序表格时偶然发现小程序没有table标签,在微信小程序社区搜索了一番发现官方给出的说法是view能够满足table样式,足以替代table标签. 以下用原生的小程序代码写了一版简单的表格, ...
html table 固定表头和列
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
elementUI table多级表头固定列
设置宽度和fixed // 1.2需要固定,3不固定 <el-table ref="table" :data="tableData" border :ce ...

table固定表头、固定列

table固定表头、固定列相关推荐

最新文章

热门文章