官方效果是這樣的：

此處改成了這樣的效果：

此處是可以進行滑動的，就是去除了滑動條，仍能滑動的效果。

下面說下修改樣式，找到使用el-table的vue組建：

在style中貼上：

<style>table-wrapper /deep/ .el-table--fit{padding: 20px !important;border: none !important;}.table-wrapper .el-table, .el-table__expanded-cell {background-color: transparent !important;border: none !important;}.table-wrapper /deep/ .el-table tr {background-color: transparent !important;border: none;}.el-table /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell{background-color: transparent !important;border: none;}/*表中數據的顏色及背景等*/.el-table th, .el-table tr {border: 0!important;background-color: transparent!important;color: white !important;}/*去每一行記錄下的橫線*/.el-table--border tr,td{border: none!important;}/*去最下面的橫線*/.el-table::before{height:0;}/*table內的高亮*/.el-table tbody tr:hover>td {background-color:rgb(79, 163, 213)!important}</style>

這里在style上不能加scope。

然后在組建外面套一個div在其class上使用table-wrapper：

此處修改樣式的邏輯是直接F12，打開開發者工具：

那個css影響了就改哪一個。

修改了的css要使用!important;避免被覆蓋。通過這種方式去改element ui中的默認樣式。

?

?

總結

以上是生活随笔為你收集整理的Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。