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

相关推荐
机器视觉知识推荐、就业指导7 小时前
npm 安装/运行报错及解决方案
前端·npm·node.js
摇滚侠7 小时前
12 移动端 WEB 前端 WEB 开发 HTML5 + CSS3 + 移动 WEB
前端·css3·html5
ez52fF0k87 小时前
.NET11云原生CI/CD在云原生应用持续集成与交付安全加固
前端·c#·交互
独泪了无痕7 小时前
pnpm依赖管理:从零开始的实践手册
前端·npm·node.js
张风捷特烈7 小时前
状态管理大乱斗#08 | MobX 源码评析 - 透明魔法
android·前端·flutter
i220818 Faiz Ul7 小时前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·spring boot·微信小程序·毕设·个人健康系统
mCell7 小时前
HTML:AI 时代的通用表达层
前端·html·aigc
mobº7 小时前
Vue3 +TypeScript 项目总结
前端·javascript·typescript
counterxing10 小时前
我整理了一个免费开发资源目录,还做成了 CLI 和 MCP
前端·agent·ai编程
子兮曰17 小时前
Bun v1.3.14 深度解析:Image API、HTTP/3、全局虚拟存储与五十项变革
前端·后端·bun