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

相关推荐
爱吃的小肥羊4 分钟前
等了整整一年,Midjourney V8今天终于开放测试了!
前端
玉米Yvmi9 分钟前
给 JS穿上铠甲:TypeScript 基础核心概念详解(类型/接口/泛型)
前端·javascript·typescript
搞个锤子哟11 分钟前
js并发请求,且限制并发请求数量实现方案
前端
米丘15 分钟前
vue-router v5.x createRouter 是创建路由实例?
前端·vue.js
cmd15 分钟前
《Vue3 watch详情:deep/immediate/flush/once 全用法 + 踩坑总结》
vue.js
阿蒙Amon24 分钟前
C#常用类库-详解JetBrains.Annotations
前端·数据库·c#
lichenyang45342 分钟前
Next.js 初学者核心知识点
前端
张一凡9343 分钟前
easy-model 在数据可视化仪表板中的应用
前端·react.js
学以智用44 分钟前
# Vue3 AJAX 请求数据
前端·vue.js