Vue3框架中让table合计居中对齐

第一步:给它加一个类名 center-table 如下:

html 复制代码
 <el-table
      :data="datas.shows"
      max-height="600px"
      show-summary
      stripe
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      class="center-table"
    ></el-table>

第二步: 使用v-deep选择器

css 复制代码
:deep(.center-table td), 
:deep(.center-table th) {
  text-align: center !important;
}

效果

原创作者:吴小糖

创作时间:2023.11.24

相关推荐
WebInfra1 小时前
Rspack 2.2 发布:30+ 项性能优化,拥抱 Solid 2.0
前端·javascript·前端框架
额额额对了1 小时前
Linux 进程管理详解:从概念到实战
java·服务器·前端
fatcoder1 小时前
玩转 Redis · Set 篇
前端·redis·后端
爱喝麻油的小哆1 小时前
🐾 Day 5|桌面数字人-接入llm可以对话啦
前端·three.js
我叫黑大帅1 小时前
关于没有对生产者做校验的思考
前端·面试·架构
万敏1 小时前
Vue3 全栈实战第七周:错误处理与请求层封装实战记录
vue.js·node.js·全栈
掘金者阿豪1 小时前
你的公网 IP 是专线还是动态变化的?一文讲透动态 IP 与固定 IP 的那些事
前端·后端
invicinble1 小时前
把握理解技术文章转化为工程水平的深度理解
前端
前端炒粉2 小时前
fetch+readablestream(Streamable)流式输出
java·服务器·前端
风骏时光牛马2 小时前
AIRAG服务异常监控告警
前端