表格需用<thead><tbody>分区，表头用<th scope="col">，图标用带宽高的<img>内联，温度数字与单位分<span>，禁用table-layout:fixed，移动端用flex布局。
表格结构必须用 <thead> 和 <tbody> 明确分区
直接写一长串 <tr><td> 容易让图标和文字错位，尤其在响应式缩放时。浏览器对 <thead> 的表头单元格默认有 display: table-header-group 行为，能稳定锚定列宽，避免图标被文字撑开变形。
实操建议：
- 表头用
<th>，每列明确语义，比如<th scope="col">日期</th> - 图标统一放在
<td>内部的<div>或<span>里，不要直接塞进<td> - 避免给
<td>设固定width，改用min-width+white-space: nowrap控制文字不换行
图标混排优先用 <img> 而非 CSS background-image
用 CSS 背景图会导致图标无法被屏幕阅读器识别，且 background-size: contain 在不同 DPI 屏幕下渲染模糊；而 <img> 可设 alt，支持 srcset 响应式加载，尺寸也更可控。
常见错误现象：图标在 iOS Safari 上变小、文字垂直居中失效、打印预览时图标消失。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
<img src="sun.svg" alt="晴天" width="24" height="24">—— 必须带width和height，否则表格单元格高度塌陷 - 同一行文字与图标用
<span>包裹，加vertical-align: middle对齐 - SVG 图标优先内联或 base64，避免额外 HTTP 请求拖慢预报加载
温度数字与单位必须拆成两个 <span>
写成 <td>26°C</td> 看似省事，但会导致单位随字体缩放比例异常、无法单独设置颜色或动画，且不利于无障碍读取（AT 工具会把 “26°C” 当作一个词朗读）。
使用场景：需要高亮最高温、给单位加灰色、做温度渐变色过渡。
实操建议：
<td><span class="temp-num">26</span><span class="temp-unit">°C</span></td>- 给
.temp-num设font-weight: bold，.temp-unit设font-size: 0.8em; color: #666 - 避免用
°实体，改用 UTF-8 字符 °，减少编码歧义
移动端窄屏下图标+文字需强制单行，禁用 table-layout: fixed
很多方案用 table-layout: fixed 配合 width 百分比强行压缩列宽，结果是图标被裁剪、文字溢出、iOS 微信内置浏览器触发横向滚动条——这不是排版问题，是布局模型误用。
性能影响：fixed 布局会让浏览器跳过自动列宽计算，但预报表格列内容长度差异大（如“多云转雷阵雨” vs “晴”），反而导致重绘卡顿。
实操建议：
- 移除所有
table-layout: fixed，靠white-space: nowrap+min-width控制最小列宽 - 用媒体查询在
max-width: 480px下将<td>改为display: flex; flex-direction: column; align-items: center - 图标
<img>加max-width: 100%，防止超宽
复杂点在于天气描述文本长度不可控，图标尺寸又必须保持一致，所以不能只靠 CSS 自适应，得在生成 HTML 前对描述字段做截断或映射简写（如“多云转雷阵雨” → “多云→雷雨”）。这个逻辑不在样式层，而在数据准备阶段。
