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

相关推荐
玲小珑10 小时前
请求 ID 跟踪模式:解决异步请求竞态条件
前端
开心_开心急了10 小时前
AI+PySide6实现自定义窗口标题栏目(titleBar)
前端
开心_开心急了10 小时前
Ai加Flutter实现自定义标题栏(appBar)
前端·flutter
布列瑟农的星空10 小时前
SSE与流式传输(Streamable HTTP)
前端·后端
GISer_Jing10 小时前
跨境营销前端AI应用业务领域
前端·人工智能·aigc
oak隔壁找我10 小时前
Node.js的package.json
前端·javascript
talenteddriver10 小时前
web: http请求(自用总结)
前端·网络协议·http
全栈派森11 小时前
Flutter 实战:基于 GetX + Obx 的企业级架构设计指南
前端·flutter
Awu122711 小时前
Vue3自定义渲染器:原理剖析与实践指南
前端·vue.js·three.js
支撑前端荣耀11 小时前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试