GUIDE深度 · Deep dive

移动端表格怎么不溢出?

窄屏表格最容易横向溢出。简单做法是包一层 overflow-x:auto;列很多时再考虑隐藏次要列或改成堆叠卡片,别把表格压扁到不可读。

更新 2026-10-31 · 公式可核验

三种做法

横向滚动:包一层 div,设置 overflow-x:auto。

隐藏次要列:用媒体查询隐藏低优先级列。

堆叠卡片:每个单元格加 data-label,窄屏变块。

可读性

不要用极小字号硬塞;宁可滚动。

固定表头在长表格里很有用,但要注意层级。

常见问题

横向滚动可访问吗?

可以,但要保证键盘可聚焦和可见滚动条。

什么时候拆表?

列太多/含义不同时拆成多个表更清晰。

数据来源

相关计算器

HTML 表格生成器设置行数、列数和表头,生成可复制的 HTML 表格代码。

更多指南

可访问的 HTML 表格阅读指南