antd table 宽度_antd-table——内容展示变型

bug单：

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)=>(

{text}

),

]}

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时(只对那些超出容器宽度的单词进行拆分，而不影响其他正常单词。)

I am a good boy, hahahahhahahahahahaha everyone likes me...

//添加word-break:break-all时(拆分所有单词)

I am a good boy, hahahahhahahahahahaha everyone very likes me...

设置文字省略：

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;

}