需求
当table内容列过多时,可通过height属性
设置table高度以固定table高度、固定表头,使table内容可以滚动
现在需求是右侧滚动条
不好看,需要去除滚动条
,并隐藏滚动条所占列
的位置文章来源:https://www.toymoban.com/news/detail-757923.html
// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
&::-webkit-scrollbar { // 整个滚动条
width: 0; // 纵向滚动条的宽度
background: rgba(213,215,220,0.3);
border: none;
}
&::-webkit-scrollbar-track { // 滚动条轨道
border: none;
}
}
// --------------------隐藏table gutter列和内容区右侧的空白
.el-table th.gutter{
display: none;
width:0
}
.el-table colgroup col[name='gutter']{
display: none;
width: 0;
}
.el-table__body{
width: 100% !important;
}
效果
文章来源地址https://www.toymoban.com/news/detail-757923.html
到了这里,关于element ui el-table表格纵向横向滚动条去除并隐藏空白占位列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!