Element UI 暗黑风格表格样式

效果展示

---

阴影表格、荧光高亮 

使用方式

---

将以下文本拷贝到一个 css 样式文件中，然后在 style 中导入

导入方式可以参考该文章

https://blog.csdn.net/qq_39291919/article/details/108957490 

.el-table {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 1);
}

table td:hover {
    color: #111 !important;
}

table td .cell {
    position: relative;
    z-index: 2;
}

table td::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    
    width: 100%;
    height: 100%;

    background: #3fff00;

    transform: scaleY(0);
    transition: transform 0.5s;
    transform-origin: center;
}

table td:hover::after {
    transform: scaleY(1);
    transition: transform 0.5s;
    transform-origin: center;
}

table td::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    background: #3fff00;

    transform: scaleY(0);
    transition: transform 0.5s;
    transform-origin: center;
    filter: blur(40px);
}

table td:hover::before {
    transform: scaleY(1);
    transition: transform 0.5s;
    transform-origin: center;
}