本文主要是介绍解决宽屏下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属性。当元素内容足够多,父元素的宽度就会完整撑开,达到父元素的最大宽度,如果元素内容有限,则宽度就是内容的宽度。此处就是利用该特性。
参考
- 我所知道的几种display:table-cell的应用
- element table 错位问题
这篇关于解决宽屏下el-table表头错位无法占满宽度100%的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!