element-UI el-table样式(去边框和滚动条样式)

摘要:
.customer表{border:.el表--组{border:类型(2){}的最后第n个。el table--border:}。el table--边框。cutter:全局el表*:-webkit滚动轨迹{background color;}/*定义滚动条轨迹+圆角的内部阴影*/*;

去边框:

给el-table绑定class=“customer-table”

.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}

.el-table--border,
.el-table--group {
  border: none;
}

.customer-table thead tr th.is-leaf {
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2) {
}

.el-table--border::after,
.el-table--group::after {
   0;
}
.customer-table::before {
   0;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
   0;
}

.el-table--border th.gutter:last-of-type {
  border-left: none;
}

  效果:

element-UI el-table样式(去边框和滚动条样式)第1张

滚动条样式:

全局el-table

*::-webkit-scrollbar {
   4px;
  height: 10px;
  background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #8db4fd;
  border-radius: 2px;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #1a3f81;
  border-radius: 2px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
效果:
element-UI el-table样式(去边框和滚动条样式)第2张

免责声明:文章转载自《element-UI el-table样式(去边框和滚动条样式)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇机器重启 查看crontab执行历史记录crontab没有执行yarn 常用命令下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 : $(document).width(); 浏览器当前窗口...

vue+ElementUI下iframe子页面弹窗蒙层遮罩问题优化

一、问题描述 在使用iframe时,子页面的弹框遮罩只能覆盖子页面,而无法扩展到父页面。(如下图) 二、解决方案 0、前提:弹出的内容高度和宽度不能超过子页面的范围(否则会出现滚动条) 1、父页面: 当子页面需要弹框时,父页面也弹出空弹框,使得整个页面能够遮罩,然后将子页面的层级提高,使子页面可以由子页面自己控制。监听子页面发来的遮罩处理信号,如果是tr...

打印divjs方法

方法 printdiv(printpage) { var css = "<style> " + " .zbtable { " + " border-collapse: collapse; " + " text-align: center; " +...

自定义浏览器滚动条样式

为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片: 经过不断的测试发现,在Win8 下面,有一部分样式都起着相同的作用。估计是因为在Win8中扁平化的界面设计而重新定议了系统中滚动条!以下是Win 8下面的滚动条样式,并写出了和CSS支持的情况: 以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了。但经过测试...

MVC中两种实体:View Model和Business Model的简化(转载)

在MVC的Model中,我们可以定义很多与视图相关的元数据,这些元数据对我们开发视图起着相当重要的作用,特别是在数据验证方面。这些元数据一般情况下我们是不会定义在业务实体(或持久化实体)上面,所以很多情况下,我们会需要开发两种实体:View Model和Business Model。这样就造成,在Action与View的沟通当中,我们需要使用View Mo...

CSS样式大全

字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX、PD、EM 粗细...