设置element表格属性(背景透明,颜色,边框...)

这篇博客主要探讨了如何使用CSS进行表格的样式设计,包括设置表格宽度、内边距、边框颜色、单元格对齐方式以及背景色等,以实现专业且美观的表格展示。同时,还详细介绍了如何改变表格的行线和列线颜色,以及在鼠标悬停时的内容行颜色变化,以提升用户体验。
摘要由CSDN通过智能技术生成
/* 整个表格的宽度 */
.tableBox {
  width: 470px;
}
/* 标题行的内边距 */
::v-deep .tableBox th {
  padding: 3px;
}
/* 内容行的属性 */
::v-deep .tableBox td {
  padding: 0px !important;
  text-align: center;
}
/* 边框 */
::v-deep .el-table--border,
.el-table--group {
  border: 1px solid #8a8a8a;
}
/**
改变表格内竖线颜色
 */
::v-deep .el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #8a8a8a !important;
}
/**
改变表格内行线颜色
 */
::v-deep .el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #8a8a8a;
}
/* 中间线 */
::v-deep .el-table thead tr th {
  border-color: #8c939d !important;
}
/* 标题行的颜色 */
::v-deep.el-table th.el-table__cell {
  background-color: #133284 !important;
  font-size: 14px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #ddf0ff;
}
/* 内容行的颜色 */
::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  border-radius: 10px;
}
::v-deep .el-table tr {
  background-color: transparent;
  color: #e2e6ec;
}
/* 鼠标经过时内容行的颜色 */
::v-deep .el-table tbody tr:hover > td {
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值