必须列是日期、星期、天气、最高温、最低温、风向风力；湿度和空气质量需后端稳定支持才添加；表头须用实际日期而非“今天/明天”；温度单位用span分层控制；响应式采用卡片式布局并配合data-label；动态更新优先局部刷新tbody或td。
用 <table> 组织天气数据时，哪些列是必须的
天气预报表格不是越全越好，关键字段漏掉反而影响可读性。核心列应包含：日期（date）、星期（weekday）、天气图标或文字（weather）、最高温（high_temp）、最低温（low_temp）、风向风力（wind）。如果加“湿度”或“空气质量”，得确认后端真能稳定提供——否则留空单元格会破坏对齐，比不加还糟。
常见错误是把“今天”“明天”硬写死在 <th> 里，结果页面缓存后第二天还是“明天”。正确做法是用实际日期值：<th>2024-06-12</th> 或结合 JS 动态渲染。
让温度数字带单位又不破坏表格宽度
直接写 28°C 容易撑开列宽，尤其在小屏上。更稳妥的方式是把单位和数值分层处理：
- 用
<span class="temp-unit">°C</span>包裹单位，CSS 控制font-size: 0.7em和vertical-align: super - 避免在
<td>里塞<br>换行，改用 CSS 的display: flex; flex-direction: column - 最高温/最低温建议拆成两个
<span>，比如<span class="high">28</span><span class="low">19</span>，方便单独配色或加图标
响应式表格在手机上不横向滚动的实操方案
纯靠 overflow-x: auto 是懒办法，用户要拖拽才能看全，体验差。真正可用的解法是：在小屏下把每行转成卡片式布局，用 <thead> 隐藏，用 <tbody> 每个 <tr> 内部重构为垂直堆叠结构。
立即学习“前端免费学习笔记（深入）”；
关键 CSS 片段：
@media (max-width: 480px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead { display: none; }
tr { border-bottom: 1px solid #eee; padding: 0.5em 0; }
td { display: flex; justify-content: space-between; }
td:before { content: attr(data-label) ": "; font-weight: bold; }
}
前提是 HTML 中每个 <td> 带 data-label 属性，比如 <td data-label="天气">多云</td>。
动态更新天气表格时，DOM 替换 vs 行内更新的选择
如果只是刷新未来 7 天数据，别整个 <table> 替换——重绘成本高，还会闪一下。更轻量的做法是只更新 <tbody> 里的 <tr>，或者更细粒度到单个 <td>。
但要注意两点：
- 如果某天数据缺失（比如 API 返回空值），不要留空
<td>，统一填<td>-</td>或<td>暂无</td>，否则表格结构可能错位 - 用
innerHTML批量写入前，确保字符串已做 HTML 转义，尤其天气描述含“&”“ - IE11 不支持
table.insertRow()在<tbody>上直接调用，得先取到<tbody>DOM 再操作
表格结构本身简单，难的是数据边界和样式坍塌点——比如某天温度是“35°C（体感41°C）”，括号内容要不要截断、是否允许折行、移动端字体大小是否随屏幕缩放而失真，这些才是真卡点。
