elementUI表格table边框不对齐

最近在使用elementUI的表格的时候出现一个问题，表格我给的是百分百宽度，但是有几列的宽度是固定的，这样就会导致表格的边框错位。

当然了，表格边框的错位原因不止这一个，可能还有其他原因。说到底就是因为elementUI的表格组件使用了两个表格，这样再使用或者数据动态变化时就很容易出现问题，下面我给出两个建议供大家参考。

一、使用doLayout方法

这个方法是elementUI提供的，使用的方式是

this.$refs.xxx.doLayout()

这个方法我不是很了解，感兴趣的可以看看官方文档，不过这个方法好像有效性不是很大。

二、使用样式覆盖

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

在全局样式中添加上面的代码就可以通过css样式实现调整，这个方法对我有效，使用后效果如下

这里的css代码参考的该博客，如果有问题可以询问该博主。

elementUI表格table边框不对齐相关推荐

element-ui 表格(table)合并表头下面合并列且可以收缩展开
百度了一大堆,发现了首行不能合并,想到了用dom做,找到了下面这个链接要点记录: 1.表头合并 -- 给table添加属性:header-cell-style="headerStyle&q ...
element-ui 表格table加border属性，右边框不显示
<el-table :data="systemData"borderstripe><el-table-column type="index"l ...
elementUI表格table的列内置样式修改方法/对比template，列属性class-name，table属性cell-class-name
1,table属性cell-class-name的使用可以作用到某一行,或者某一列等等.但是在style标签中要去掉scoped,不然无效. (在elementUI中,row-class-name ...
HTML中表格table边框border（1px还嫌粗）的解决方案：
第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白 ...
table表格代码内线加粗_HTML中表格table边框border（1px还嫌粗）的解决方案：
第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白 ...
html表格线条粗细,[转]HTML中表格table边框border（1px还嫌粗）的解决方案：
第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白 ...
element-ui 表格table，动态显示每一列的，重置全选
先看效果图 html: html: 我是通过v-if="colData[0].istrue",通过勾选框的选中和不选中来控制对应列的istrue的true/false,从而控制每一 ...
(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例
Ⅰ.Element-ui 提供的Table组件与想要目标情况的对比: 1.Element-ui 提供Table组件情况: 其一.Element-ui 自提供的Table代码情况为(示例的代码): // ...
element-ui表格组件table踩坑总结
table组件中,基本情况简述: element框架的table组件,内容涵盖以下总结知识点,内容比较基础,知识有点交叉.对比学习更易于理解.应用和掌握. 常用UI效果,参考点: table边框设置( ...

elementUI表格table边框不对齐

一、使用doLayout方法

二、使用样式覆盖

elementUI表格table边框不对齐相关推荐

最新文章

热门文章