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.

Your problem is all about scroll, then set both height and width. then check the result — Fatemeh Qasemkhani, Apr 15 '20 at 09:58
yes fixed. Previously i was using scroll as Boolean but now i have given scroll width in pixels and issue is fixed for the columns width. Thanks — Muhammad Awais, Apr 17 '20 at 05:49

score 1 · Answer 1 · answered Sep 20 '21 at 06:33

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
 }

answered Sep 20 '21 at 06:33

bibin antony

293
1
5

.antd-table-custom-class thead th, .antd-table-custom-class tbody td { white-space: nowrap; word-break:break-word; word-break: break-all } – bibin antony Sep 20 '21 at 06:34

score 0 · Answer 2 · answered Jan 22 '23 at 01:43

0

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;
}

answered Jan 22 '23 at 01:43

Vadim

306
1
5
13

Antd table column width issue

2 Answers2