ant-design table 中的td 数据过多显示部分,鼠标放上去显示全部
作者:互联网
第一:表格中的数据自动换行,所以表格中的行高不一致
目标实现:防止自动换行,
代码实现://*** 是主要实现
:global { .ant-table-tbody > tr > td, .ant-table-thead > tr > th { height: 62px; white-space:nowrap;//*** overflow: auto;//*** } .ant-table-thead > tr > th { background: #2db7f5; white-space:nowrap;//*** overflow: auto;//*** }
第二:上述目标实现,但是全部显示出来
目标实现:指定td的数据显示部分以及...,当鼠标放上去显示全部
代码实现:
const webColumns = [ { title: 'IP', dataIndex: 'srcIp', key: 'srcIp', width:'15%', },{ title: '描述', dataIndex: 'msg', key: 'msg', //width:'8%', onCell: ()=>{ return { style:{ maxWidth:260, overflow:'hidden', whiteSpace:'nowrap', textOverflow:'ellipsis', cursor:'pointer', } } }, render: (text) => <span placement="topLeft" title={text}>{text}</span>, } ]
其中 oncell()以下为主要实现。
标签:放上去,tr,ant,design,table,td,nowrap,overflow 来源: https://www.cnblogs.com/notchangeworld/p/11549130.html