elementUI表格宽度变化后不对齐

Question

期待的功能：
表格左侧有一个可以隐藏/显示的div
表格宽度占满父元素，列宽固定，最后一列只设置最小宽度
纵向和横向滚动条自动根据宽度显示

现象：
左侧区域显示时，最后一列内容换行，高度不够，滚动条正常显示
左侧区域隐藏时，最后一列无须换行，高度足够，滚动条消失，但是表头和内容不对齐。

主要代码如下，按钮只是控制flag的值，v-if和v-show结果是一样的。

<button @click="show=!show">switch</button>
<div class="d-flex">
<div style="width:200px;" v-if="show"></div>
    <el-table
      :data="tableData"
      height="280"
      stripe
      @row-click="rowClick"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="450">
      </el-table-column>
      <el-table-column label="配送信息">
        <el-table-column
          prop="name"
          label="姓名"
          width="450">
        </el-table-column>
        <el-table-column label="地址">
          <el-table-column
            prop="province"
            label="省份"
            width="300">
          </el-table-column>
          <el-table-column
            prop="city"
            label="市区"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            width="300">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="邮编"
            min-width="20">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>    
  </div>

另外，这个问题原本是一个模态窗中出现的，当左侧div从隐藏再切换回显示时，表格的滚动条也不会再出现了。这个现象在上面的代码中不会出现，所以先请教一下对齐的问题。

在codepen放了代码，发现在只有在chrome才有问题，FF和IE下正常
链接描述

Answer 1

body .el-table th.gutter{
display: table-cell!important;
}
body .el-table colgroup.gutter{
display: table-cell!important;
}
//全局设置