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

相关推荐
变与不变8063 小时前
防抖节流详解
开发语言·前端·javascript
用户6602676118793 小时前
HTTP 200,页面仍是旧状态:定位一次前后端字段错配
javascript
用户72526496629693 小时前
浏览器为什么加载不了超大图片
前端·javascript
酷炫码神3 小时前
Day 2|CSS 盒模型:把昨天的骨架,变成能看的页面
前端·css
Amos_Web3 小时前
我做了一个 Chrome 插件,专治“这篇文章我明明看过,但重点去哪了?”
前端·浏览器
OpsEye3 小时前
企业 AI 治理到底管什么:预算、权限、会话、效能四个维度
javascript·ai编程
abcyuu3 小时前
用友 U8 Cloud 生产制造模块深度解析:从 BOM 建立到成本核算的技术实现
前端·数据库·制造
零基础1233 小时前
为什么 Agent 用 SQLite 数据库?
前端·人工智能·sqlite·开源
xuyanzhuqing3 小时前
如何在一周内将一个巨石工程实现国际化
前端
数据掘金3 小时前
小程序埋点方案的埋点覆盖率怎么算?
前端