使用 position: sticky 结合语义化 结构，可高效实现滚动时表头和首列始终可见的“冻结窗格”效果，无需 JavaScript，兼容现代浏览器。

使用 `position: sticky` 结合语义化 `

` 结构，可高效实现滚动时表头和首列始终可见的“冻结窗格”效果，无需 JavaScript，兼容现代浏览器。

在 Web 表格开发中，常需模拟 Excel 的“冻结首行+首列”交互体验：当内容区域横向或纵向滚动时，表头（<thead>）和左侧标识列（如任务名、序号等）应保持固定位置。纯 CSS 即可优雅实现，核心在于 <strong><code>sticky 定位 + 正确的层级与尺寸控制。

✅ 关键实现要点

• 容器需启用滚动：外层 <div> 设置 <code>overflow-auto 和明确宽高（如 h-96 w-full），作为滚动上下文；
• 表头固定：<th> 添加 <code>sticky top-0 z-10，确保垂直滚动时始终吸附顶部；
• 首列固定：<td>（或 <code><th>）添加 <code>sticky left-0 z-10，注意必须配合 table-fixed 布局以锁定列宽；
• 层级管理：z-10 确保固定单元格不被其他内容遮挡；
• 宽度控制：建议使用 table-fixed + 显式 min-w-* / w-*，避免因内容撑开导致 sticky 失效。

? 完整示例代码（Tailwind CSS）

@@######@@

⚠️ 注意事项

• sticky 依赖父容器滚动上下文：若外层未设 overflow-x/y-auto 或高度不足，sticky 将退化为普通定位；
• left-0 与 top-0 需同时存在时慎用 z-index 冲突：首单元格（左上角）应设更高 z-index（如 z-20），确保覆盖表头与首列交叠区域；
• 避免 flex 替代 table：虽然 display: grid 或 flex 可模拟表格，但原生 <table> 对 <code>sticky 支持更稳定，且语义正确、可访问性更强；
• 移动端适配：小屏下建议增加 min-w-max 或横向滚动提示，并测试 sticky 在 iOS Safari 中的行为（需确保 -webkit-overflow-scrolling: touch 不干扰）。

通过上述方案，你无需引入复杂库即可获得高性能、语义清晰、无障碍友好的“Excel 式冻结表格”，适用于项目管理、数据看板、甘特图等场景。


Excel Report
使用 openpyxl 从 CSV 文件创建格式化的 Excel 报表工作簿。当用户提供或引用 .csv 文件并要求将其转换为 .xlsx 时使用。
下载

<div class="relative h-96 w-full overflow-auto border border-gray-300">
  <table class="min-w-full border-collapse table-fixed">
<thead><tr>
<th class="bg-gray-700 text-white p-3 sticky top-0 left-0 z-20 w-48">Task</th>
        <th class="bg-gray-600 text-white p-3 sticky top-0 z-10 w-40">Mon</th>
        <th class="bg-gray-600 text-white p-3 sticky top-0 z-10 w-40">Tue</th>
        <th class="bg-gray-600 text-white p-3 sticky top-0 z-10 w-40">Wed</th>
        <th class="bg-gray-600 text-white p-3 sticky top-0 z-10 w-40">Thu</th>
      </tr></thead>
<tbody>
<tr>
<td class="bg-gray-200 font-medium p-3 sticky left-0 z-20">Design UI</td>
        <td class="border p-3">✅</td>
        <td class="border p-3">✅</td>
        <td class="border p-3">⏳</td>
        <td class="border p-3">—</td>
      </tr>
<tr>
<td class="bg-gray-200 font-medium p-3 sticky left-0 z-20">API Integration</td>
        <td class="border p-3">—</td>
        <td class="border p-3">✅</td>
        <td class="border p-3">✅</td>
        <td class="border p-3">⏳</td>
      </tr>
<tr>
<td class="bg-gray-200 font-medium p-3 sticky left-0 z-20">Testing</td>
        <td class="border p-3">—</td>
        <td class="border p-3">—</td>
        <td class="border p-3">✅</td>
        <td class="border p-3">✅</td>
      </tr>
</tbody>
</table>
</div>