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

相关推荐
科杰智能制造9 分钟前
纯前端html、js实现人脸检测和表情检测,可直接在浏览器使用
前端·javascript·html
每天吃饭的羊25 分钟前
组件库的有些点击事件是name-click这是如何分装de
前端·javascript·vue.js
Coder-coco25 分钟前
个人健康管理|基于springboot+vue+个人健康管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·mysql·论文
x***010636 分钟前
SpringSecurity+jwt实现权限认证功能
android·前端·后端
1024肥宅44 分钟前
防抖(Debounce)
前端·javascript·ecmascript 6
1024肥宅1 小时前
节流(Throttle)
前端·javascript·ecmascript 6
大怪v1 小时前
【Virtual World 02】两点一线!!!
javascript·css·html
by__csdn1 小时前
Vue2纯前端图形验证码实现详解+源码
前端·javascript·typescript·vue·状态模式·css3·canva可画
Gomiko1 小时前
JavaScript基础(八):函数
开发语言·javascript·ecmascript
w***37511 小时前
Spring 核心技术解析【纯干货版】- Ⅶ:Spring 切面编程模块 Spring-Instrument 模块精讲
前端·数据库·spring