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