在codex中实现固定表头需手动添加css并确保html含和，外层容器设overflow-y:auto，tbody设display:block及table-layout:fixed，再统一单元格内边距与行高防抖动。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Codex中实现固定表头的数据表格，需要手动添加CSS样式并确保HTML结构符合滚动容器嵌套表格的规范，否则表头会随内容一起滚动或错位。
准备带tbody的语义化表格结构
先写出标准的HTML表格，必须包含 <thead> 和 <code><tbody>，不能只用 <code><tr><td> 堆砌。Codex不自动补全缺失的表格语义标签，缺少 <code><tbody> 会导致后续CSS失效。
<p>在Codex编辑器中输入以下结构（注意：不是粘贴整段代码，而是逐标签手敲）：</p>
<p><code><table class="fixed-header-table">
<thead><tr>
<th>姓名</th>
<th>部门</th>
<th>入职时间</th>
</tr></thead>
<tbody>
<tr>
<td>张三</td>
<td>技术部</td>
<td>2022-03-15</td>
</tr>
<tr>
<td>李四</td>
<td>市场部</td>
<td>2021-08-22</td>
</tr>
</tbody>
</table>
用CSS设置容器高度与滚动行为
给表格外层加一个带固定高度和 overflow-y: auto 的容器，这是固定表头生效的前提。直接对 <table> 设置高度和 overflow 无效。
<p>在Codex的「自定义CSS」区域（设置 → 外观 → 自定义CSS）中，粘贴以下样式：</p>
<p></p>
<pre class="brush:php;toolbar:false;">.fixed-header-table { width: 100%; border-collapse: collapse; }<br>.fixed-header-table thead th { position: sticky; top: 0; background: #fff; z-index: 10; }<br>.fixed-header-table tbody { display: block; max-height: 300px; overflow-y: auto; }<br>.fixed-header-table thead, .fixed-header-table tbody tr { display: table; width: 100%; table-layout: fixed; }</pre>
<p>⚠️ 注意：<strong>【tbody 必须设为 display: block】</strong>，否则 sticky 无法在表格内部起作用；同时 <code>table-layout: fixed 能防止列宽被长文本撑开导致表头与列错位。
适配不同行高与边框对齐
方法一：强制统一单元格内边距与行高
通过 Codex CLI 生成图片，支持尺寸控制和批量模式。依赖：codex (npm)。代理默认启用。用 generate.sh 生成单张，batch_generate.sh 批量生成游戏 UI 素材，gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
在刚才的CSS末尾追加：
.fixed-header-table td, .fixed-header-table th { padding: 8px 12px; line-height: 1.4; }
方法二：解决滚动时横向边框断开问题
给 tbody 的每一行添加底部边框，并取消 thead 的下边框，避免双线重叠：
.fixed-header-table thead th { border-bottom: none; }<br>.fixed-header-table tbody td { border-bottom: 1px solid #e0e0e0; }
这一步操作起来很简单，直接把两行CSS复制进自定义CSS框就行。如果表格列数多、内容长短差异大，建议优先用方法一控制行高，否则sticky表头可能在滚动瞬间出现轻微抖动。
