解決element-ui的table表格控件表頭與內容列不對齊問題
更新時間：2022年07月29日 10:26:35 作者：wwf1225
這篇文章主要介紹了解決element-ui的table表格控件表頭與內容列不對齊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui的table表格控件表頭與內容列不對齊
解決方法
將以下樣式代碼添加到index.html、或app.vue中（必須是入口文件，起全局作用?。?/p>
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中（必須是入口文件，起全局作用?。?/p>
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路由this.route.push跳轉頁面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉頁面不刷新的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
本文主要介紹了Element?table?上下移需求的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了Vue3設置Proxy代理解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了基于el-tree實現懶加載穿梭條的示例代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了Vue項目設置可以局域網訪問，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3中的watch()的用法和具體作用,通過合理和熟練使用watch()方法，開發(fā)者可以更加高效地完成前端開發(fā)工作，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue.js中created方法作用及mounted和created的區(qū)別介紹，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue綁定對象與數組變量更改后無法渲染問題解決,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了vue通過watch對input做字數限定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01