element plus(ui) table表头与表身不对齐问题

element plus(ui) table表头与表身不对齐问题_第1张图片

element plus(ui) table表头与表身不对齐问题_第2张图片

 当表宽度为100% 但拖动表头导致每个列宽加起来没有100%时就会发生这个错位问题

有两种解决方案:

1.让表头和表尾样式类 el-table__header,el-table__footer 加上 margin:0 auto; 

效果:

element plus(ui) table表头与表身不对齐问题_第3张图片

 2 el-scrollbar__view样式加上 display: block !important; 或者将el-table所在添加字体居左 text-align: left;

效果:

element plus(ui) table表头与表身不对齐问题_第4张图片

具体用法根据需求来 ,推测问题是因为表体的滚动视图为行内元素了,然后继承了 字体居中 text-align: center;导致居中但表头和表尾并不是行内元素所以导致错位

你可能感兴趣的:(vue3.0项目,vue.js,elementui,前端)