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

逃离我推掉我的手 2021-12-17 17:49 1016阅读 0赞

# [element-ui的table表格控件表头与内容列不对齐问题][element-ui_table] #

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

![20190126232357927.png][]  
解决方法：  
将以下样式代码添加到index.html、或app.vue中（必须是入口文件，起全局作用！）  
body .el-table th.gutter\{  
display: table-cell!important;  
\}

例如（app.vue）：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td> <code>&lt;</code><code>template</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>id="app"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>router-view</code><code>&gt;&lt;/</code><code>router-view</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;/</code><code>template</code><code>&gt;</code> &nbsp; <code>&lt;</code><code>script</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>export default{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: 'APP'</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&lt;/</code><code>script</code><code>&gt;</code> &nbsp; <code>&lt;</code><code>style</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>/* 解决element-ui的table表格控件表头与内容列不对齐问题 */</code> <code>&nbsp;&nbsp;</code><code>.el-table th.gutter{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display: table-cell!important;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&lt;/</code><code>style</code><code>&gt;</code> &nbsp; <code>&lt;</code><code>style</code>&nbsp;<code>lang="scss"&gt;</code> <code>&nbsp;&nbsp;</code><code>@import './styles/index.scss'; // 全局自定义的css样式</code> <code>&lt;/</code><code>style</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

[element-ui_table]: https://www.cnblogs.com/myfate/p/11078397.html
[20190126232357927.png]: /images/20211214/e5fa9971b4f54b37a76618525105cde5.png