当前位置:   article > 正文

去除element table表格所有边框_element tabel去除上下边框线

element tabel去除上下边框线

 在表格外层包一层自定义的div class="table-wrapper",利用三箭头深度修改

  1. /* *表格背景透明 */
  2. /* //透明化整体 */
  3. .table-wrapper /deep/.el-table,.el-table__expanded-cell {
  4. background-color: transparent !important;
  5. }
  6. /* //透明化行、单元格,删除表头下横线 */
  7. .table-wrapper /deep/ tr, .table-wrapper /deep/ th, .table-wrapper /deep/ td {
  8. background: #1439391c !important;
  9. color:#fff;
  10. border-bottom: 0px;
  11. /* //删除表头下横线 */
  12. }
  13. /* //hover时样式 */
  14. .table-wrapper /deep/ .el-table tbody tr:hover>td {
  15. background-color: #367f7f78 !important
  16. }
  17. /* // 表格内容(有用) */
  18. .table-wrapper /deep/ .el-table__row {
  19. background: #1439391c !important;
  20. color: #46d4ff;
  21. }
  22. /**表格背景透明end */
  23. .table-wrapper >>> .el-table__row>td{
  24. /* 去除表格线 */
  25. border: none;
  26. }
  27. .table-wrapper >>> .el-table th.el-table__cell.is-leaf {
  28. /* 去除上边框 */
  29. border-bottom: none !important;
  30. }
  31. .table-wrapper >>> .el-table__inner-wrapper::before{
  32. /* 去除下边框 */
  33. height: 0;
  34. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/113579
推荐阅读
相关标签
  

闽ICP备14008679号