el-table 出现宽度无限拉长的问题

这年头,为啥问题都跑出来了!TT——TT

问题描述

如图所示:



html 如下,


解决思路

参考链接1
这种方法里面我这测试是会出现滚动条
参考链接2
参考链接3

当前本人尝试得到,加上这些就可以正常:

table.form-table {
  display: block;
  & > tbody {
    display: block;
    & > tr {
      display: block;
      & > td {
        display: block;
      }
    }
  }
}

一头雾水,没有方向,只能手动测试,
去掉td下面div的 el-row 类就可以正常了,

div.el-table__body-wrapper 不显示的时候,就可以正常了,


div.el-table__empty-block 不显示的时候,就可以正常了,



同理,表格有数据时,就没有问题。

解决方案

同事给那个table加了下面的就没问题了,也不知道为啥这样:

.form-table {
    width: 100%;
    border-collapse: separate;
    table-layout: fixed;  // 这一行是重点
}

你可能感兴趣的:(el-table 出现宽度无限拉长的问题)