antd-table——內容展現變型

bug單：

https://github.com/ant-design/ant-design/issues/13825

 

 

 

1.設置固定寬度：在columns中設置widht或者className

{
    title: '年齡',
    dataIndex: 'age',
    key: 'age',
    //width: 100,
}, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
    //width: 200,
}

2.用可展開的table，佈局會好看不少

 

 

 3.動態生成dom:

columns={[
  ...
  render: (text, record) => (
    <div style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
      {text}
    </div>
  ),
]}

4.設置樣式：

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

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

.ant-table-tbody > tr > td {
    white-space: nowrap;
}
.ant-table-thead > tr > th{
    white-space: nowrap;
}

.ant-table-thead tr {
  display: flex;
}
.ant-table-thead th {
  flex: 1;
}
.ant-table-row {
  display: flex;
}
.ant-table-row td {
  flex: 1;
  overflow: auto;
}
.ant-table-row td::-webkit-scrollbar {
  display: none;
}
.columns {
  display: flex;
  align-items: center;
  width: 0;
}

5.寬度不夠：

scroll={{ x: true }}

:scroll="columns.length>0?{ x: '130%' }:{}"

6.樣式設置：強制換行

//添加word-wrap:break-word時(只對那些超出容器寬度的單詞進行拆分，而不影響其餘正常單詞。)
        
    <div style="width:150px;height:70px;background:red;word-wrap:break-word">
       I am a good boy, hahahahhahahahahahaha everyone likes me...
    </div>

//添加word-break:break-all時(拆分全部單詞)
 
    <div style="width:150px;height:70px;background:red;word-break:break-all">
       I am a good boy, hahahahhahahahahahaha everyone very likes me...
    </div></span>

 設置文字省略：

style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"

.textOverflow{
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    max-width: 118px;
}