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

相关推荐
AI周红伟3 分钟前
事件分析:FDE标准,“OpenClaw+RAG+Agent” 应用实战的标准
前端·人工智能·chrome·chatgpt·aigc
Mike_jia11 分钟前
Databasus:开源数据库备份革命的里程碑,企业级数据安全的守护神
前端
恋猫de小郭15 分钟前
真正的跨平台 AI 自动化框架,甚至还支持鸿蒙
android·前端·flutter
IT_陈寒17 分钟前
Redis的LRU淘汰策略坑了我一天血汗
前端·人工智能·后端
晓得迷路了18 分钟前
栗子前端技术周刊第 132 期 - date-fns 支持 Temporal、npm 攻击事件、VoidZero...
前端·javascript·css
雨季mo浅忆20 分钟前
记录Vue3项目中的各类问题
前端·bug·vue3
亿元程序员24 分钟前
Cocos游戏开发中的弯的箭头游戏效果
前端
ct97826 分钟前
Promise
前端·javascript·vue.js
怕浪猫27 分钟前
Electron 开发实战(十一):自动更新机制|服务架构、公私网更新、版本回滚全解
前端·javascript·electron
AI视觉网奇34 分钟前
three-bvh-csg glb分割
开发语言·前端·javascript