Antd表格滚动 宽度自适应 不换行

<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, 不过我的项目中的内容是最好不要换行的

你可能感兴趣的:(经验分享,个人记录,antd,Form,滚动宽度自适应,不换行)