elementui 改变全局所有表格的边框颜色。

问题描述：

应用户需求要调整表格边框和表格行的颜色。附加：最好改变全局所有表格的边框颜色。

使用的elementui框架，该框架是开源的，但是也存在很多问题。

改变表格的边框颜色没有特定的属性进行修改，只能通过css脚本进行修改。

解决办法：

1.通过浏览器找到表格边框的css样式。

鼠标放在边框上，右键弹框中选择“检查”。进入如下图所示：

到这一步后其实我也不知道哪一个是能改变表格内行颜色的，这个时候该怎么办呢？

因为css本身底子比较弱，所以只能用笨办法，一个一个试，凡是看见有颜色标记的都试一下，（标#的都是标识颜色的）。

2.将浏览器中标的css复制到页面中。

这时又遇到了问题，只有边框起作用，内行线和内竖线不起作用。

查阅资料后发现是因为<style>中使用了scoped的，这个的意思是<style scoped></style>中的css样式只对本页面起作用。去掉scoped后，内行线和内竖线都显示了。

还有一种方法是，一个页面中可以有两个<style>,一个可以是有scoped的<style scoped></style>，一个是没有scoped的。

3.因为我最最终的需求是要整个框架内的所有表格的边框和内行线和内竖线都改变颜色，所有需要放到全局的css中。

这时又遇到了问题，复制进去三个css后没起作用，查阅资料后，再改变颜色的后面加上了 “!important”,然后就解决了这个问题。

 

在全局的css文件中添加如下代码（我项目中是在main.css）

/**
改变边框颜色
 */
.el-table--border, .el-table--group {
    border: 1px solid #8A8A8A!important;
}
/**
改变表格内竖线颜色
 */
.el-table--border  td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #8A8A8A!important;
}
/**
改变表格内行线颜色
 */
.el-table  td, .el-table th.is-leaf  {
    border-bottom: 1px solid #8A8A8A!important;
}

.el-table thead tr th{
    border-color: #8c939d;
}