解决Antd Table组件表头不对齐的问题

陌上烟雨寒

已于 2022-03-01 11:27:50 修改

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 javascript 开发语言

于 2022-03-01 11:27:20 首次发布

原文链接：https://blog.csdn.net/jingshui1234/article/details/116481149

vue 专栏收录该内容

52 篇文章

订阅专栏

本文详细介绍了如何优化Ant Design Table组件的使用，包括如何避免设置最后一列宽度，推荐使用百分比设置列宽，利用`scroll`属性实现自适应滚动，并通过`wordBreak`样式确保内容换行。同时，提供了CSS样式以隐藏滚动条宽度，提升表格显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最后一列不设置宽度。因为antd会自己给最后一列分配宽度；
设置合适的宽度。推荐用百分比设置宽度。
scroll属性中的x选择一个合适的值（或者直接设为 max-content）

scroll={{ x: 'max-content', y: tableHeight() }}

4.给Table组件设置这个中英文都换行的样式

style={{ wordBreak: 'break-all' }}

<Table
        bordered
        loading={props.showTableLoading}
        dataSource={myCompanyList.list || []}
        columns={columns}
        scroll={{ x: 'max-content', y: tableHeight() }}
        style={{ wordBreak: 'break-all' }}
/>

让滚动条宽度不计算。

.ant-table-small>.ant-table-content .ant-table-header{
    overflow-y: overlay !important;
}

.ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body{
    overflow-y: overlay !important;
}