### [表格在手机上挤爆：响应式那几招](https://www.huociguo.com/article/1846)

**Published:** 2026-10-03T02:35:19

**Author:** 米了

**Excerpt:** 📱 后台有张十二列明细表，电脑上正常，手机一开横向爆出屏幕，用户说根本没法看。试了两套方案，各有适用面。第一招…

📱 后台有张十二列明细表，电脑上正常，手机一开横向爆出屏幕，用户说根本没法看。试了两套方案，各有适用面。

第一招，外层包个容器设 `overflow-x:auto`，表格原样保留，窄屏里横向滚动。改动最小，适合要逐列对比的数据。

![表格数据展示示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6248959.jpeg)

数据密集的表，手机上靠横向滚动保完整

第二招，纯 CSS 卡片化。把 `table`、`tr`、`td` 都设 `display:block`，`thead` 藏起来，每个 `td` 用 `::before` 带上字段名。每行变成一张小卡片，浏览体验好。

⚠️ 坑：转 block 后 `border-collapse` 失效，表格线没了，得给 `td` 单独加边框。列宽也要显式写，否则挤成一团。配合 `table-layout:fixed` 和百分比宽度，列比例才稳。

其余场景，数据多且要对比用横向滚动，字段浏览为主用卡片化。

**Tags:** overflow水平滚动, table-layout属性, 数据表格适配, 移动端表格, 表格响应式

**Categories:** HTML5

---