小屏幕表格响应式方案是用 display: block + overflow-x: auto 实现横向滚动，通过包裹容器控制宽度、white-space: nowrap 防换行、sticky header 保持表头可见，并优化触控与字体缩放兼容性。

小屏幕下表格内容被压缩、文字挤在一起、甚至横向溢出，主要因为表格默认是固定布局且不响应式。用 display: block 配合 overflow: auto 是一种轻量、兼容性好、无需 JS 的解决方案，核心是让表格“变身为可滚动的块级容器”。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

把 table 设为块级并启用横向滚动

直接给 <table> 设置 <code>display: block 会破坏其表格语义结构，但这是实现滚动的前提——只有块级元素才能可靠触发 overflow。同时需限制宽度，否则滚动无效：

• 给 table 添加 display: block 和 width: 100%
• 包裹一层 <div class="table-container">，对该 div 设置 <code>overflow-x: auto 和 width: 100%
• 确保内部单元格（td/th）不强制固定宽，避免撑破容器；可用 white-space: nowrap 防止文字换行导致高度失控（按需）

保持表头可读性（sticky header 可选）

横向滚动时，列标题容易移出视野。可在支持 sticky 的浏览器中让 thead th 固定：

• 给 thead 设置 display: block（配合 tbody 也设为 block）
• 给 th 添加 position: -webkit-sticky; position: sticky; top: 0; background: white; z-index: 1
• 注意：此时需为 th 和 td 显式设置 width 或使用 min-width，否则列宽可能错乱

移动端体验优化细节

单纯加滚动条还不够友好，需兼顾触控与可读性：

立即学习“前端免费学习笔记（深入）”；

• 在小屏上禁用 font-size 缩放（如 iOS Safari 自动缩放），加 table { -webkit-text-size-adjust: 100%; }
• 给容器添加 -webkit-overflow-scrolling: touch，提升 iOS 滚动流畅度
• 对窄列（如操作按钮、状态标签）用 white-space: nowrap + text-overflow: ellipsis + overflow: hidden 控制显示
• 必要时用媒体查询，在极小屏（如 320px）隐藏非关键列，用 display: none

这个方案不依赖框架，兼容到 IE11，适合内容优先、列数不多、允许横向滑动的场景。如果表格结构复杂或需多维响应（比如转为卡片堆叠），可结合 CSS Grid 或 JavaScript 动态重排，但 display block + overflow auto 已解决大多数压缩问题。