<Table
className={styles.table}
rowKey={(record) => record.key}
columns={columns}
dataSource={dataSource}
scroll={{ x: 'max-content' }} // 加上这条 横向滚动 支持此属性的浏览器内容就不会换行了
pagination={false}
/>
styles.less
.table {
:global {
.ant-table-thead > tr > th {
background: #fff !important;
white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
}
.ant-table-tbody >tr> td {
white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
}
}
}
或者可以这样设置
<Table
pagination={false}
rowKey={record => record.key}
dataSource={projectList}
columns={this.columns.map(item => { // 通过配置 给每个单元格添加不换行属性
const fun = () => ({ style: { whiteSpace: 'nowrap' } });
item.onHeaderCell = fun;
item.onCell = fun;
return item;
})}
loading={getting}
scroll={{ x: 'max-content' }}
// onHeaderCell={() => ({ style: { whiteSpace: 'nowrap' } })}
// onCell={() => ({ style: { whiteSpace: 'nowrap' } })}
// 文档里说可以这么写 但是我写了无效 不知道原因
/>
另一个思路是设置每个单元格的min-width, 不过我的项目中的内容是最好不要换行的