Antd table column width issue

Question

I use antd table in my project and often use a horizontal scroll when there are many columns in a table that cannot be displayed in a single frame. The width for each column is defined. It was working fine in previous days but now i am having a problem with column width. The column width is not working properly if i don't apply ellipsis to each column . Is there any way to fix it rather than using ellipsis separately for each column?

    const tableColumns = () => { 
return [
        {
          title: 'col one',
          dataIndex: 'throws',
          key: 'throws',
          width:110,
          ellipsis: true,
          sorter: (a, b) => stringValueSort(a.throws, b.throws),
        },
        {
          title: 'col two',
          dataIndex: 'bats',
          key: 'bats',
          width:90,
          ellipsis: true,
          sorter: (a, b) => stringValueSort(a.bats, b.bats),
        },
      ] 
    };

If i use ellipsis: true property columns width automatically adjust according to the text content in column. Width of the column still not been applied using this width property.

Answer 1

.antd-table-custom-class thead th, .antd-table-custom-class tbody td {
 white-space:pre-wrap;
 text-overflow: ellipsis
}

if you want to see whole text please

.antd-table-custom-class thead th, .antd-table-custom-class tbody 
 td
 {    white-space: nowrap;
      word-break:break-word;
      word-break: break-all
 }

Answer 2

if antd table width 100% not working:

.ant-table-fixed {
    table-layout: fixed;
}

.ant-table-tbody > tr > td {
    word-wrap: break-word;
    word-break: break-all;
}