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

相关推荐
Dxy12393102161 分钟前
JS如何获取元素高度
开发语言·javascript·ecmascript
文心快码BaiduComate7 分钟前
Comate搭载DeepSeek-V4
前端·后端
豹哥学前端9 分钟前
5分钟搞懂事件委托
前端·javascript·面试
Awu122714 分钟前
🍎把数学公式搬进 Web 表格:一个 VTable 实战案例
前端
江无行者16 分钟前
aly oss技能应用
前端
朝阳3923 分钟前
单向数据流
前端
小小小小宇25 分钟前
H5 嵌入微信 / 支付宝 / 抖音小程序 WebView:调用原生能力完整方案
前端
卷帘依旧27 分钟前
React中父子组件生命周期的执行顺序
前端
绝世唐门三哥31 分钟前
ES6 --- import/export 全解析
开发语言·前端·javascript
小杍随笔31 分钟前
【iNovel 前端架构深度解析:基于 Vue 3 + TypeScript + Tauri 的跨端小说写作工具】
前端·架构·typescript