First: the data table wrap, so that rows of the table are inconsistent high
Achieve the goal: to prevent the wrap,
Code implementation: // *** is the main achievement
: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;//*** }
Second: to achieve these goals, but all show
Achieve the goal: Specify the data display section and td ... when the mouse is put up Show all
Code:
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>, } ]
Which oncell () The following is the main achievement.