Ant Design Table 的默认行为。如果不设置宽度,列会根据内容和表格容器宽度自动调整,当列数较多时容易被挤压。 原因Table 默认使用自适应布局列宽根据内容自动分配没有设置scroll.x时表格会尝试适应容器宽度列数多且内容少时列会被挤压得很窄解决方案1. 设置横向滚动推荐Table dataSource{dataSource} columns{columns} scroll{{ x: max-content }} // 或设置具体宽度如 1500 onChange{handleTableChange} rowSelection{{...}} /2. 使用固定布局Table dataSource{dataSource} columns{columns} tableLayoutfixed onChange{handleTableChange} rowSelection{{...}} /3. 为列设置最小宽度{ title: 姓名, dataIndex: name, key: name, minWidth: 100, // 确保最小宽度 }最简单的方式是添加scroll{{ x: max-content }}这样表格会横向滚动列不会被挤压。
💡
读完这篇文章,你可以带走什么

本文来自编程新知一线开发与建站实战沉淀:讲清原理、给出可复现步骤、标注避坑要点。看完后可以直接在你的项目或网站中落地验证。

编
编程新知内容团队
一线开发 · 建站实施 · 持续更新
由资深前端工程师、后端架构师与建站实施人员共同维护,坚持"真实案例 + 完整步骤 + 避坑指南"的内容准则。如果你在落地中遇到问题,欢迎联系我们交流。

想把这套方案用到自己的项目上?

编程新知提供技术答疑与网站建设一站式服务,欢迎联系我们获取针对性建议。

联系工程师
📚

系统学习该技术

进入对应栏目,从基础到进阶完整学习,配套案例与避坑指南。

前往栏目 →
🏗️

需要落地实施

企业建站、SEO 优化、服务器部署等需求,交给工程师一步到位。

了解服务 →
💬

还有疑问

技术难题或方案咨询,联系编程新知获取一对一的专业建议。

联系我们 →