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

相关推荐
赵_叶紫6 分钟前
Kubernetes 从入门到实践
前端
阿珊和她的猫15 分钟前
深入解析浏览器的渲染过程
前端·javascript·vue.js
匠心网络科技42 分钟前
JavaScript进阶-ES6 带来的高效编程新体验
开发语言·前端·javascript·学习·面试
Never_Satisfied1 小时前
在HTML & CSS中,nth-child、nth-of-type详解
前端·css·html
睡不着的可乐1 小时前
createElement → VNode 是怎么创建的
前端·javascript·vue.js
光影少年1 小时前
前端css如何实现水平垂直居中?
前端·javascript·css
C澒2 小时前
SLDS 自营物流系统:Pickup 揽收全流程
前端·架构·系统架构·教育电商·交通物流
摸鱼的春哥2 小时前
把白领吓破防的2028预言,究竟讲了什么?
前端·javascript·后端
infiniteWei2 小时前
SKILL.md 触发机制与设计规范:避免“写了不触发”
java·前端·设计规范
慧一居士2 小时前
SVG图片介绍和使用
前端