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

相关推荐
IT_陈寒19 分钟前
SpringBoot实战:3个隐藏技巧让你的应用性能飙升50%
前端·人工智能·后端
weixin1997010801622 分钟前
唯品会商品详情页前端性能优化实战
前端·性能优化
爱学习的程序媛30 分钟前
【Web前端】Pinia状态管理详解
前端·vue.js·typescript
java1234_小锋38 分钟前
分享一套优质的SpringBoot+Vue咖啡商城系统
vue.js·spring boot·咖啡商城
爱学习的程序媛40 分钟前
“数字孪生”详解与前端技术栈
前端·人工智能·计算机视觉·智慧城市·信息与通信
海石1 小时前
微信小程序开发02:原始人也能看懂的着色器与视频处理
前端·微信小程序·视频编码
程序员Sunday1 小时前
Claude Code 生态爆发:5个必知的新工具
前端·人工智能·后端
ChoSeitaku1 小时前
NO.2|proto3语法|消息类型|通讯录|文件读取|enum类型
java·服务器·前端
小J听不清1 小时前
CSS 边框(border)全解析:样式 / 宽度 / 颜色 / 方向取值
前端·javascript·css·html·css3
用户255778850811 小时前
axios全局重复请求取消
前端