ant-design中ant-table中设置scroll属性时多出来一段白色垂直空隙解决办法

4,040 阅读1分钟

问题

bug已修复懒得撤回,大概长这个样子,右上角那一块其实滚动条(大概宽12px) image.png 由a-table一个属性scroll导致

image.png 官方文档也说明了这个问题

image.png 解决办法也很简单,就是把除了最后一列的其它列都设置width

解决办法一

如果是初始数据可以这样设置

// 除最后一行外都设置宽度
[
  {
    title: '名称',
    width: 120
  },
  {
    title: '规范'
  }
];

解决办法二

还可以全局修改ant-table的样式,给它们设置一个默认宽度,适合使用了很多a-table的项目

.ant-table {
    /**
      ant-table最后一列设置宽度会出现白条的情况
    */
    .ant-table-scroll {
      .ant-table-hide-scrollbar {
        overflow-y: auto !important;
      }
      /**
          DOM长这个样子
          <colgroup><col><col></colgroup>
          其中的col代表每一列
      */
      colgroup *:not(:last-child) {
          width: 120px;
          min-width: 120px;
      }
    }

  }