Antd table how scroll bars appear in long tables

As shown in the figure above, you want to realize the following , see antd table Official documents want to achieve this , The presentation was not very detailed , To achieve a pile of holes .
The tables on Alibaba cloud pages , There is also a lot of stretching bug, I don't know how to implement it , Let me introduce a method to realize the following , Not afraid of stretching …

    <div class="content">
      <a-table :columns="columns" :data-source="dataSource" :row-key="record => record.id" :pagination="pagination" :scroll="{ x: '1400px' | true }" class="charge-table" @change="handleTableChange" >
        <div slot="trialQuota" slot-scope="text">{
   { text }} Hours </div>
        <template slot="action" slot-scope="text, record">
          <a-button type="link" style="margin-left: -8px" @click="openDetail(text, record)">  details  </a-button>
          <a-button type="link" @click="openCharge(text)">  Charge account  </a-button>
          <a-button type="link" :disabled="text.tryData" @click="onTry(text)">  The trial  </a-button>
        </template>
      </a-table>
    </div>

  .content {
    
    flex: 1;
    background: #ffffff;
    border-radius: 8px;
    padding: 0 20px;
    position: relative;
  }
   /deep/.ant-spin-nested-loading {
    
    position: absolute;
    left: 20px;
    right: 20px;
  }

The point is css Set absolute positioning ,columns Each item should be set width, And width Must be fixed px, It can't be a percentage （%）, Otherwise the stretch will be hidden , It doesn't matter whether the cells are broken into rows , At the beginning, I stepped on a lot of holes here

const columns = [
  {
    
    title: ' Number ',
    dataIndex: 'id',
    // width: '3.4%',
    width: '58px'
  },
  {
    
    title: ' User platform name ',
    dataIndex: 'ourUserName',
    // width: '6.9%',
    width: '173px'
  },
  {
    
    title: ' User external name ',
    dataIndex: 'userName',
    // scopedSlots: { customRender: 'userName' },
    // width: '166px'
    // width: '6.9%',
    width: '145px',
    ellipsis: true
  },
  {
    
    title: ' User group ',
    dataIndex: 'groupDesc',
    // scopedSlots: { customRender: 'groupDesc' },
    // width: '10%',
    ellipsis: true,
    width: '198px'
  },
  {
    
    title: ' User group accounts ',
    dataIndex: 'groupName',
    // width: '8.4%',
    width: '145px'
  },
  {
    
    title: ' balance ( Company ： Nuclear time )',
    dataIndex: 'corestimeBalance',
    // width: '7.9%',
    width: '129px'
  },
  {
    
    title: 'VPN Address ',
    dataIndex: 'vpnAddress',
    scopedSlots: {
     customRender: 'vpnAddress' },
    // width: '13.2%',
    width: '217px'
    // ellipsis: true,
    // width: '246px'
    // customCell: () => {
    
    // return {
    
    // style: {
    
    // 'min-width': '300px',
    // 'white-space': 'nowrap',
    // 'text-overflow': 'ellipsis'
    // }
    // }
    // }

    // customCell: () => {
    
    // return {
    
    // style: {
    
    // 'color':'yellow',
    // 'width': '246px'
    // }
    // }
    // },
    // customHeaderCell: () => {
    
    // return {
    
    // style: {
    
    // 'color':'yellow',
    // 'width': '246px'
    // }
    // }
    // }
  },
  {
    
    title: 'SSH Address ',
    dataIndex: 'sshAddress',
    ellipsis: true,
    // width: '13.2%',
    width: '245px'
  },
  {
    
    title: ' Trial mode ',
    dataIndex: 'trialMethod',
    ellipsis: true,
    // width: '7.8%',
    width: '128px'
  },
  {
    
    title: ' Trial quota ',
    dataIndex: 'trialQuota',
    // width: '6.9%',
    width: '104px',
    scopedSlots: {
     customRender: 'trialQuota' }
  },
  {
    
    title: ' Cluster operation ',
    key: 'action',
    scopedSlots: {
     customRender: 'action' },
    fixed: 'right',
    width: '132px'
  }
]

The results are as follows ：