style problem of Table component with fixed column and scroll attr

Version

2.13.8

Environment

mac and pc; chrome 61;

Reproduction link

https://codepen.io/anon/pen/ooXVNx?editors=0011

Steps to reproduce

const columns = [
  {
    title: 'col1',
    dataIndex: 'col1',
    key: 'col1',
    width: 100,
  },
  ...
  {
    title: 'action',
    key: 'action',
    width: 100,
    fixed: 'right',
    render: () => <a>click</a>,
  }
]

...

<div style={{width: 500}}>
    <Table rowKey={r=>r.id} columns={columns} dataSource={data} scroll={{ x: 400 }}/>
</div>
<div style={{width: 300}}>
    <Table rowKey={r=>r.id} columns={columns} dataSource={data} scroll={{ x: 400 }}/>
</div>

What is expected?

.

What is actually happening?

当表格的父元素宽度大于表格组件设置的scroll.x的值时，设置了固定表的一列会出现重复的问题；小于或等于scroll.x时正常

当不确定表格的父元素的宽度时，scroll.x不好确定，这样的情况是否有一些解决方法呢？

[yesmeck]

1. Container width should not greater than table width;
2. Leave at least one column’s width to auto, so that table can adjust it’s width automatically.

[corkymaigre]

Antd table writes the tags (i.e., <th> and <td>) of the fixed columns two times: once with the other columns and once in a specific table tag corresponding to the fixed elements.

What you need to do is to hide the one which is with the other ones and render only the fixed one. You can do that by overwritting the CSS properties.

Use visibility: hidden instead of display: none otherwise the column next to the fixed one will go under it.

.ant-table-body .ant-table-fixed .ant-table-thead tr th:last-child,
.ant-table-body .ant-table-fixed .ant-table-tbody tr td:last-child {
  visibility: hidden;
}```