GUIDE深度 · Deep dive
移动端表格怎么不溢出?
窄屏表格最容易横向溢出。简单做法是包一层 overflow-x:auto;列很多时再考虑隐藏次要列或改成堆叠卡片,别把表格压扁到不可读。
三种做法
横向滚动:包一层 div,设置 overflow-x:auto。
隐藏次要列:用媒体查询隐藏低优先级列。
堆叠卡片:每个单元格加 data-label,窄屏变块。
可读性
不要用极小字号硬塞;宁可滚动。
固定表头在长表格里很有用,但要注意层级。
常见问题
横向滚动可访问吗?
可以,但要保证键盘可聚焦和可见滚动条。
什么时候拆表?
列太多/含义不同时拆成多个表更清晰。