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

相关推荐
鹏多多12 小时前
Trae cn里使用Pencil来制作设计图的手把手教程
前端·ai编程·trae
客场消音器12 小时前
如何使用codex进行UI重构,让AI开发的前端页面不再千篇一律
前端·后端·微信小程序
大家的林语冰13 小时前
Canvas 文艺复兴,HTML-in-Canvas 炫酷特效摆拍走红,Canvas 中也能渲染交互式的 HTML 元素了
前端·javascript·html
WebGirl13 小时前
Visual Studio Code (VSCode) 中配置 MCP
前端
JarvanMo13 小时前
Fluwx 6.0 预览版本他来了
前端
KaMeidebaby13 小时前
卡梅德生物技术快报|单 B 细胞抗体筛选服务:技术架构、流程实现与数据验证
前端·数据库·其他·百度·新浪微博
爱勇宝13 小时前
别焦虑,也别躺平:给年轻程序员的一封信
前端·后端·架构
OpenTiny社区13 小时前
2026 OpenTiny NEXT 产品调研启动!
前端·开源·github
德莱厄斯13 小时前
GIS 开发要变天?看看高德空间智能给我们带来了什么!
前端·gis·agent