element表格（无边框）_el-table不显示边框-优快云博客

文章展示了如何使用CSS样式修改ElementUI的el-table组件，使其具有透明背景、无边框以及自定义字体大小和颜色的特性。表格的行和单元格都设为透明，同时禁用了行hover时的背景色变化，以创建一种简洁的显示效果。

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

 <el-table :data="tableData1" style="width: 100%" :row-style="{height:'0.5rem'}" :cell-style="{padding: '0'}" :header-cell-style="{
            background: 'transparent',
            color: '#fff',
            border: 'none',
            textAlign: 'center',
            fontSize: '14px',
            padding: '0',
          }">
            <el-table-column type="index" label="排名" width="50">
            </el-table-column>
            <el-table-column prop="name" label="系统名称" width="">
            </el-table-column>
            <el-table-column prop="value" label="流量" width="">
            </el-table-column>
          </el-table>


css样式


/deep/ .el-table {
  background-color: transparent; //主体框透明透明
  // border: rgb(40, 118, 193) 1px solid;
  border-bottom: none;
  margin-top: 0.2rem;
}

/deep/ .el-table tr {
  background-color: transparent !important; //每一行透明
  // background: linear-gradient(90deg, #0f3770 20%, transparent 100%);

  border-bottom: none;
}

/deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  font-size: 0.18rem;
  color: #fff;
  text-align: center;
  background-color: transparent; //每一行的单元格透明
  border-bottom: none;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0) !important;
}

/deep/.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}