表格容器必须设置固定高度和overflow-y-auto，核心是用块级div包裹table并设h-64/max-h-96等明确高度，而非直接作用于table；表头固定需为每个th添加sticky top-0 bg-white z-10，并确保thead或table有relative定位；列宽失控时对th/td加min-w-0，移动端横向滚动需overflow-x-auto配合-webkit-overflow-scrolling:touch。
表格容器必须设置固定高度和 overflow-y
可滚动表格的核心不是给 <table> 加样式，而是控制它的父容器。Tailwind 默认不会让表格自身滚动，必须用一个包裹容器（比如 <div>）来约束高度并启用垂直滚动。
常见错误是直接对 <table> 设置 h-64 或 overflow-y-auto —— 这无效，因为 <table> 是替换元素，高度行为受 display 和 box-sizing 影响，且默认不响应 overflow。
- 正确做法：用
<div class="h-64 overflow-y-auto"><table>...</table></div></li> <li>高度建议用 <code>h-64
、max-h-96等固定值，避免用h-full（除非父级有明确高度） - 加
scrollbar-track-gray-100和scrollbar-thumb-gray-300可微调滚动条外观（需开启 Tailwind 的scrollbar插件）
表头固定需要 sticky + top-0 + bg-white
滚动时表头消失是用户最常抱怨的问题。Tailwind 本身不提供“冻结首行”语义，但可用 sticky + top-0 模拟，前提是 <thead> 内的 <th> 要单独设样式。
关键点在于：sticky 生效的前提是父容器有相对定位（relative），且 <th> 必须脱离文档流后仍能覆盖滚动内容，所以背景色不能透明。
立即学习“前端免费学习笔记（深入）”；
- 给
<thead>加relative（或确保其父<table>有relative） - 每个
<th>加sticky top-0 bg-white z-10 - 必须设
z-10，否则滚动时会被<tbody>的行遮挡 - 如果用了深色主题，把
bg-white换成bg-gray-800，并配text-white
列宽失控？用 min-w-0 防止 th/td 帽子撑开表格
长文本或未断行内容会让表格宽度暴增，导致横向滚动不可控，甚至破坏布局。Tailwind 的 min-w-0 是解决这类问题的快捷方式，它会重置 min-width: min-content 的默认行为。
这个属性特别适用于 <th> 和 <td>，尤其当内容含 URL、邮箱、长英文单词时。
- 给所有
<th>和<td>加min-w-0 - 配合
truncate（显示省略号）或break-all（强制换行）使用效果更稳 - 避免对整张表设
w-full后又期望列自动均分——Tailwind 不干预 table-layout，默认是auto，列宽由内容决定
移动端横向滚动要加 overscroll-x
小屏设备上，表格列多时容易横向溢出，用户无法左右滑动查看全部列。仅靠 overflow-x-auto 不够，还需防止滚动被系统拦截。
Tailwind 本身没有 overscroll-x 工具类，得手动加 CSS 或用 scroll-snap-x 替代，但最简方案是直接写内联样式或自定义类。
- 在表格容器上加
overflow-x-auto overscroll-x-contain - 为兼容旧版 Safari，可补
-webkit-overflow-scrolling: touch - 若表格嵌套在响应式卡片里，记得给卡片加
overflow-hidden，否则横向滚动条可能被裁掉
sticky 不生效，其实只是忘了 relative 定位上下文；也有人加了 overflow 却没封住容器高度，结果整个页面被拉长。动手前先确认容器层级和定位关系，比反复调 class 更快。 
