解决宽屏下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 错位问题

猜你喜欢

转载自blog.csdn.net/sinat_36521655/article/details/109620999