解決element-ui的table表格控件表頭與內(nèi)容列不對齊問題
更新時間：2022年07月29日 10:26:35 作者：wwf1225
這篇文章主要介紹了解決element-ui的table表格控件表頭與內(nèi)容列不對齊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui的table表格控件表頭與內(nèi)容列不對齊
解決方法
將以下樣式代碼添加到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表格控件表頭與內(nèi)容列不對齊問題 */
? .el-table th.gutter{
? ? display: table-cell!important;
? }
</style><style lang="scss"> ? @import './styles/index.scss'; // 全局自定義的css樣式 </style>
el-table表頭和表格列寬不一樣問題
直接上圖
解決辦法
1.網(wǎng)上找的辦法
將以下樣式代碼添加到index.html、或app.vue中（必須是入口文件，起全局作用?。?/p>
body .el-table th.gutter{
display: table-cell!important;
}2.自己新建css文件common.css，在文件中將上面樣式寫入
/* 解決element-ui的table表格控件表頭與內(nèi)容列不對齊問題 */
body .el-table th.gutter{
display: table-cell!important;
}3.在main.js文件中引入common.css文件
import '@/style/common.css'
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- element-ui復(fù)雜table表格動態(tài)新增列、動態(tài)調(diào)整行以及列順序詳解
- vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
- 關(guān)于Element-UI Table 表格指定列添加點(diǎn)擊事件
- vue element-ui里的table中表頭與表格出現(xiàn)錯位的解決
- element-ui中頁面縮放時table表格內(nèi)容錯位的解決
- 關(guān)于Element-ui中Table表格無法顯示的問題及解決
- 關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決
- Element-UI中關(guān)于table表格的那些騷操作(小結(jié))
- Element-UI實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的操作代碼
相關(guān)文章
Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
Element?table?上下移需求的實(shí)現(xiàn)
本文主要介紹了Element?table?上下移需求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了Vue3設(shè)置Proxy代理解決跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼
這篇文章主要介紹了基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問
這篇文章主要介紹了Vue項(xiàng)目設(shè)置可以局域網(wǎng)訪問，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3中的watch()的用法和具體作用,通過合理和熟練使用watch()方法，開發(fā)者可以更加高效地完成前端開發(fā)工作，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue.js中created方法作用及mounted和created的區(qū)別介紹，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue綁定對象與數(shù)組變量更改后無法渲染問題解決,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue通過watch對input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過watch對input做字?jǐn)?shù)限定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01