解决宽屏下el-table表头错位无法占满宽度100%的问题

本文主要是介绍解决宽屏下el-table表头错位无法占满宽度100%的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题

在宽屏情况下el-table出现表头错位且无法占满宽度100%的问题：

解决方案

在通用样式文件下，添加如下样式：

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

原理

使用display: table-cell可以让标签元素以表格单元格的形式呈现，类似于td标签，此时元素对宽度高度敏感，对margin值无反应，响应padding属性。当元素内容足够多，父元素的宽度就会完整撑开，达到父元素的最大宽度，如果元素内容有限，则宽度就是内容的宽度。此处就是利用该特性。

参考

1. 我所知道的几种display:table-cell的应用
2. element table 错位问题

这篇关于解决宽屏下el-table表头错位无法占满宽度100%的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---