航空价格矩阵必须用而非div布局，因其语义正确、屏幕阅读器友好、原生渲染高效；需用+sticky固定表头、colgroup控制列宽对齐、dataset存状态实现精准更新。
表格结构必须用 <table> 而不是 <code>div 布局
航空价格矩阵本质是二维关系数据：行通常是出发时间/航班号，列是舱位等级（Y/B/M），单元格是实时价格+附加状态（如“仅剩2座”）。用 div 模拟表格会破坏语义、损害屏幕阅读器支持，且无法响应式地控制行列对齐。浏览器对 <table> 的原生渲染优化（尤其是大量单元格时）也明显优于 CSS Grid/Flex 模拟方案。<p>关键实操点：</p>
<ul><li><code><thead> 固定列头和行头（如首列航班号、首行舱位），配合 <code>position: sticky 实现滚动锁定，但需注意 Safari 对 tbody 内 sticky 支持不稳定，建议将行头单独抽成 <tbody><tr><th> 并设 <code>vertical-align: top
<td> 里嵌套复杂组件（如按钮、图标），改用 <code>data-* 属性存状态，用 JS 动态注入——否则 React/Vue 渲染大量 <td> 时重绘开销剧增<li>每张价格表必须有唯一 <code>id，方便后续用 document.getElementById() 直接定位，比 querySelector 遍历快一个数量级
colgroup 是控制列宽与对齐的唯一可靠方式
价格矩阵常需“航班号列窄、价格列宽、状态列窄”，CSS width 在 <td> 上不可靠（尤其内容溢出时），而 <code>colgroup 由浏览器在布局早期解析，优先级最高。
常见错误：
- 写成
<col style="width: 80px">却忘了加<colgroup></colgroup>包裹——浏览器直接忽略 - 用百分比宽度时未给
<table> 设 <code>table-layout: fixed，导致列宽被内容撑开，矩阵变形 - 价格列需要右对齐，但只给
<td> 设 <code>text-align: right，结果小数点不垂直对齐；正确做法是在对应<col>上设style="text-align: right"动态更新价格时别直接
innerHTML整表替换一次刷新可能涉及上百个单元格，整表
innerHTML = newHTML会触发完整重排重绘，卡顿明显。真实生产环境应只更新变动单元格。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 用
dataset存原始价格和时间戳，比如<td data-price="1299" data-updated="1715643210">¥1,299</td>，JS 对比新旧值再决定是否更新 - 批量 DOM 操作用
DocumentFragment，把所有要改的<td> 先 append 到 fragment，最后一次性 replaceChild<li>避免在循环中反复读取 <code>offsetHeight等布局属性——价格变化后若需重新计算行高，统一在requestAnimationFrame里做
移动端横屏时用
transform: rotateZ(90deg)不如重构列行为行有些团队尝试用 CSS 旋转整个
<table> 解决窄屏显示问题，结果触控坐标错乱、字体渲染模糊、iOS Safari 滚动异常。真正可行的是服务端或前端按设备宽度切换渲染模式：<ul> <li>宽度 <details> + <code><summary></summary>实现轻量折叠 - 用
- 保留原
<table> 但加 <code>class="mobile-compact"，用媒体查询把<th> 和 <code><td> 设为 <code>display: block，配合::before伪元素注入行头/列头标签 - 绝对不要用
viewport缩放强行适配——用户双指缩放会失效，且违反 WCAG 1.4.4
最易被忽略的是价格单位一致性：国际航线需同时显示 USD 和本地货币，但 <td> 里混排多币种时，小数位对齐极易错乱。解决方案是统一用 <code><span class="price-amount"></span> 包数字，<span class="price-currency"></span> 包符号，并用 font-variant-numeric: tabular-nums 保证等宽数字对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
