通过为表格外层容器设置固定高度和 overflow: auto，即可实现动态表格的垂直滚动，无需修改表格内部结构或依赖 javascript。

通过为表格外层容器设置固定高度和 overflow: auto，即可实现动态表格的垂直滚动，无需修改表格内部结构或依赖 javascript。

当使用 PHP 动态生成大量数据（如汽车库存列表）并渲染为 HTML 表格时，常见问题是表格高度超出视口，导致页面被拉长、内容不可控。原方案中虽已用 <div class="table-wrapper"> 包裹表格，但缺失关键样式：容器需有明确高度限制 + 溢出行为定义。

✅ 正确做法是为 .table-wrapper 添加以下 CSS 规则：

.table-wrapper {
  max-height: 400px;     /* 推荐使用 max-height 而非 height，更灵活 */
  overflow-y: auto;      /* 仅在 Y 轴启用滚动条（避免多余横向滚动） */
  overflow-x: hidden;    /* 防止意外水平溢出（尤其表头过宽时） */
  margin: 10px 70px 70px;
  box-shadow: 0 35px 50px rgba(0, 0, 0, 0.2);
  border-radius: 8px;    /* 可选：提升视觉一致性 */
}

⚠️ 注意事项：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 勿对 <table> 本身设置 height 或 overflow：表格元素不支持 overflow，强行设置无效；
• 避免 white-space: nowrap 在 <th>/<td> 中滥用：可能导致单元格内容撑宽容器，触发不必要的水平滚动；
• 若表头（<thead>）需固定（即滚动时表头始终可见），需额外处理：可将 <thead> 单独提取为绝对定位层，或改用 position: sticky（现代浏览器兼容性良好）：

  .fl-table thead th {
    position: sticky;
    top: 0;
    background: #fff; /* 避免滚动时文字穿透 */
    z-index: 10;
  }

• 响应式增强建议：在小屏幕下降低 max-height 或启用横向滚动（overflow-x: auto），确保移动端可用性。

最终效果：无论后端返回 10 行还是 200 行数据，.table-wrapper 都会保持可控尺寸，超出部分自动出现垂直滚动条，用户体验清晰可控。

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