解决宽屏下el-table表头错位无法占满宽度100%的问题_el-table缩放屏幕表格列错位

作者：盐析白兔 | 2024-02-20 02:17:46

踩

el-table缩放屏幕表格列错位

在宽屏情况下el-table出现表头错位且无法占满宽度100%的问题：
在这里插入图片描述

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

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

.el-table colgroup.gutter {
  display: table-cell !important;
}
1
2
3
4
5
6
7

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】