el-table表格设置为透明色

最新推荐文章于 2025-06-25 00:33:26 发布

兜小糖的小秃毛

最新推荐文章于 2025-06-25 00:33:26 发布

阅读量972

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/Roy__Jason/article/details/136351035

文章描述了一个使用CSSFlexbox对ElementUI中的`.el-table`进行美化和布局调整的示例，包括改变宽度、高度、对齐方式，以及去除底部白线等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.box {
  width: 600px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  :deep().el-table {
    width: 500px;
    height: 260px;
    color: #1976d2;
    background-color: transparent;
    .el-table__expanded-cell,
    tr,
    th {
      background-color: transparent;
    }
    th {
      border-color: #065d92;
    }
    .el-table__body {
      td {
        border-bottom: 1px solid #065d92;
      }
      tr:hover {
        td {
          background: transparent;
        }
      }
    }

    .el-table__footer {
      td {
        border-color: #065d92;
        background-color: transparent;
        color: #1976d2;
      }
    }
    .el-table__inner-wrapper::before {
      height: 0 !important;
    }
  }
  // .el-table::before {
  //   //去除底部白线
  //   left: 0;
  //   bottom: 0;
  //   width: 100%;
  //   height: 0px;
  // }
}