表格需用分区，表头用，图标用带宽高的内联，温度数字与单位分，禁用table-layout:fixed，移动端用flex布局。
表格结构必须用 <thead> 和 <code><tbody> 明确分区
<p>直接写一长串 <code><tr><td> 容易让图标和文字错位，尤其在响应式缩放时。浏览器对 <code><thead> 的表头单元格默认有 <code>display: table-header-group 行为，能稳定锚定列宽，避免图标被文字撑开变形。
实操建议：
- 表头用
<th>，每列明确语义，比如 <code><th scope="col">日期</th> - 图标统一放在
<td> 内部的 <code><div> 或 <code><span></span>里，不要直接塞进<td> <li>避免给 <code><td> 设固定 <code>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="晴天" style="max-width:90%" style="max-width:90%">—— 必须带width和height，否则表格单元格高度塌陷 - 同一行文字与图标用
<span></span>包裹，加vertical-align: middle对齐 - SVG 图标优先内联或 base64，避免额外 HTTP 请求拖慢预报加载
温度数字与单位必须拆成两个
<span></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> 改为 <code>display: flex; flex-direction: column; align-items: center - 图标
<img>加max-width: 100%，防止超宽
复杂点在于天气描述文本长度不可控，图标尺寸又必须保持一致，所以不能只靠 CSS 自适应，得在生成 HTML 前对描述字段做截断或映射简写（如“多云转雷阵雨” → “多云→雷雨”）。这个逻辑不在样式层，而在数据准备阶段。
-
