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

相关推荐
专业程序开发源2 分钟前
springboot旅游推荐系统82074-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·php·课程设计·旅游
前端柱子4 分钟前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端
阿虎儿5 分钟前
我的 HTML 样板(HTML Boilerplate)
前端·html
Amos_Web9 分钟前
Rspack 源码解析(八):Module、Chunk 与 Runtime ID
前端·rust·源码阅读
彭于晏分晏15 分钟前
深入理解 Vue 3 响应式原理:从 Proxy 到依赖收集
前端
晚安日记wanna18 分钟前
Vue3 script setup 的四层追问答到第三层才算过关
前端·vue.js·面试
前端柱子24 分钟前
Chaikin‘s Corner Cutting 算法 应用canvas绘制平滑的曲线
前端
gnip27 分钟前
uts 插件示例:获取设备电量信息
前端·javascript
码上成长32 分钟前
Mapbox 上用 Turf 裁多边形:屏幕贴边了,接口却说越界
前端·前端框架
计算机魔术师37 分钟前
纽约时报告了OpenAI和微软:820万条聊天记录背后,是AI时代最大的版权保卫战
前端