解决element-ui的table表格控件表头与内容列不对齐问题

更新时间：2022年07月29日 10:26:35 作者：wwf1225

这篇文章主要介绍了解决element-ui的table表格控件表头与内容列不对齐问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

element-ui的table表格控件表头与内容列不对齐

解决方法

将以下样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！）

body .el-table th.gutter{
display: table-cell!important;
}

例如（app.vue）：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default{
     name: 'APP'
  }
</script>

<style>
  /* 解决element-ui的table表格控件表头与内容列不对齐问题 */
  .el-table th.gutter{
    display: table-cell!important;
  }
</style>

<style lang="scss">
  @import './styles/index.scss'; // 全局自定义的css样式
</style>

el-table表头和表格列宽不一样问题

直接上图

解决办法

1.网上找的办法

将以下样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！）

body .el-table th.gutter{
display: table-cell!important;
}

2.自己新建css文件common.css，在文件中将上面样式写入

/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
body .el-table th.gutter{
  display: table-cell!important;
}

3.在main.js文件中引入common.css文件

import '@/style/common.css'

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 3中常用的生命周期钩子和监听器的操作方法
这篇文章主要介绍了Vue 3中常用的生命周期钩子和监听器的操作方法,分析常用的一些生命周期钩子和监听器可以帮助我们在组件中处理数据加载、状态变化和响应式更新,需要的朋友可以参考下
2024-07-07
在vue中实现禁止回退上一步,路由不存历史记录
这篇文章主要介绍了在vue中实现禁止回退上一步,路由不存历史记录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue axios基于常见业务场景的二次封装的实现
这篇文章主要介绍了vue axios基于常见业务场景的二次封装的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
使用vite构建vue3项目的实现步骤
通过本文,您可以了解如何使用Vue CLI创建Vue 3项目,配置Vite,利用其优势进行开发,具有一定的参考价值,感兴趣的可以了解一下
2023-08-08
vue项目实现减少app.js和vender.js的体积操作
这篇文章主要介绍了vue项目实现减少app.js和vender.js的体积操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
在Vue中进行数据分页的实现方法
在前端开发中,数据分页是一个常见的需求,特别是当处理大量数据时,Vue作为一款流行的JavaScript框架,提供了强大的工具和生态系统来实现数据分页,本文将介绍如何在Vue中进行数据分页,以及如何设计一个通用的分页组件,需要的朋友可以参考下
2023-10-10
Vue动态数据实现 el-select 多级联动、数据回显方式
这篇文章主要介绍了Vue动态数据实现 el-select 多级联动、数据回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue自定义权限标签详细代码示例
这篇文章主要给大家介绍了关于vue自定义权限标签的相关资料,在Vue中你可以通过创建自定义组件来实现自定义标签组件,文中给出了详细的代码示例,需要的朋友可以参考下
2023-09-09
vue 验证两次输入的密码是否一致的方法示例
这篇文章主要介绍了vue 验证两次输入的密码是否一致的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue单页应用中如何使用jquery的方法示例
最近在工作中遇到的一个需求，需要在vue-cli建立的应用中引入jquery的方式，通过查找相关的资料最终解决了，所以这篇文章主要给大家介绍了关于在vue单页应用中如何使用jquery的方法示例，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07