el-table同时开启固定列和展开行时，水平滚动的内容截断问题
Demo预览：
https://sunzsh.github.io/vue-demos/#/table-cols-fixed
代码 / 文件：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/table-cols-fixed.vue
如果el-table同时使用这种固定列和
展开行的时候
大家看被展开的区域
在滚动的时候就会被截断
那今天呢
就给大家分享一个用纯CSS
来解决的思路
只是呢他有一点不完美的地方就是
被展开的这块区域
就只能是一个固定高度了
这个高度值你可以设置
只是呢
他不能动态的被称高或者缩小了
我们首先啊
需要让这一块展开的区域
用这个absolute来脱离目前的文档流
目的呢就是让它不受这个滚动的影响
脱离之后呢
我们把它锚定在
el-table这个组件
的最外层的那个容器上
这样的话里边的table这么滚动
它就不动了
那我们怎么做
能让它锚定在
最外层的那个el-table的容器里边呢
因为它中间还有很多层级的dom结构
所以呢这就要用到子绝父相了
我们呀要把中间的这几层的DOM节点
都给它改成这个默认的static
比如说从这
一直到最外层的el-table
中间这些层级的dom节点
他们的position不能等于relative
也就是说不能改动，就得是默认值的static
所以呢我在样式里边写了一个
这个其实就是两个元素会影响他
一个是这个
TD、一个是这个body的wrapper
它俩
在el-table里是relative的
它会影响我们去找到最外层的el-table
所以呢我们把它改成static
这样的话呢
这个div就会跳过
它俩一直找到最外层的这个div
然后呢我们再把里边展开的区域啊
设成absolute
然后把z-index调高一点
这样的话呢
就能盖住左右两边固定的列了
然后为什么要设一个背景颜色呢
大家看如果不设背景颜色的话呢
他左右两边滚动的时候
这他这个阴影不好看
所以呢我们用背景颜色把阴影盖住
然后呢还有一个问题需要解决
就是因为我们把它脱离文档流了
所以
它就不会再撑高原来的那个容器了
所以呢我们要想办法让它
在脱离文档流的同时
还能有办法让它撑高原原来的容器
那怎么办呢
我就想了一个办法
（哎？不是这个）
在这
大家看
这个就是脱离了文档流的那个容器
然后下边写了一个空的div
然后样式怎么写呢
我们让这个这个是脱离文档流的容器
和跟他相邻的
大家看 这个加号跟他相邻的后边这个div
的高度一起设置
要么是120啊要么是
这个都可以
打开设置完以后呢
他就一起变高了
最后呢为什么下面还有一个padding呢
大家看如果不写padding的话呀
他在滚动的时候这个阴影盖不全
他上面还有一部分有阴影下边也有
所以呢我们加一个padding
这样的话呢能把这个阴影盖住
需要再有空隙的话呢
我们可以自己在这个Div里面
再设padding
这个代码等一下我把它提交到demo里
大家未来如果碰到这种需求
可以自己来找一下
最后更新于
这有帮助吗？