开发情况:

固定table高度时,出现滚动条,我们希望隐藏滚动条,或修改滚动条样式,出现table右边出现15px 的固定留白。

代码示例

<el-table class="controlTable" header-row-class-name="controlHead" :data="statisticList" style="width: 720px;"
            height="332">

在这里插入图片描述

解决方案

方案一:

/deep/ .el-table th.gutter{
  display: none;
  width:0
}
/deep/ .el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
/deep/ .el-table__body{
  width: 100% !important;
}

在这里插入图片描述

// 上面配置完成 表头依然存在 样式不对的情况
.blackHeader { // 表头class
  th.el-table__cell {
    background: rgba(16, 98, 243, 0.035);
    &:nth-child(4) {
    	// 隐藏倒数第二个的边框 4要根据实际调整
      border-right: none;
    }
  }
}
// 修改上面gutter,设置宽度,表头和内容对齐
.el-table th.gutter {
  width: 3px
}
.el-table colgroup col[name='gutter'] {
  width: 3px;
}

方案二:
直接将table内容右边做配合界面设计的留白,如果是只能贴边的话,只能选方案一:

.controlTable{
	padding-right: 20px;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐