el-table使用与样式修改_eltable样式修改-优快云博客

本文详细介绍了如何使用 Element UI 框架定制表格样式的各种技巧，包括修改背景、字体颜色、斑马线效果、鼠标悬浮效果等，帮助开发者实现个性化的表格展示。

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

开篇：修改element的样式的时候style标签不能加上scoped,
为了防止修改的样式影响到别的页面，建议在当前页面加一个id,修改时带上id，或者在样式前面加上 /deep/ ，控制修改的权限范围

<template>
   <div id="top">
</div>
</template>

修改头部背景

#top .el-table th{
    background: #344067;
  }

修改行背景

 #top .el-table tr{
   background: #16203C;
  }

修改斑马线背景(奇偶行背景)

#top .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #1f284c;
  }

修改行内线的颜色

#top .el-table td,.building-top .el-table th.is-leaf {
    border-bottom:  1px solid #ccc;
  }

修改表格最底部颜色和高度

 #top .el-table::before{
   border-bottom:  1px solid #ccc;
    height: 2px
  }

修改表头字体颜色

#top .el-table thead {
    color: #8EB7FA;
    font-weight: 500;
  }

修改表格无数据背景，字体颜色

#top .el-table__empty-block{
    background: #16203C;
  }
#top .el-table__empty-text{
  color: #ccc
}

修改表格鼠标悬浮hover背景色

#top .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #114696;
}