必须列是日期、星期、天气、最高温、最低温、风向风力；湿度和空气质量需后端稳定支持才添加；表头须用实际日期而非“今天/明天”；温度单位用span分层控制；响应式采用卡片式布局并配合data-label；动态更新优先局部刷新tbody或td。
用 <table> 组织天气数据时，哪些列是必须的
<p>天气预报表格不是越全越好，关键字段漏掉反而影响可读性。核心列应包含：日期（<code>date）、星期（weekday）、天气图标或文字（weather）、最高温（high_temp）、最低温（low_temp）、风向风力（wind）。如果加“湿度”或“空气质量”，得确认后端真能稳定提供——否则留空单元格会破坏对齐，比不加还糟。
常见错误是把“今天”“明天”硬写死在 <th> 里，结果页面缓存后第二天还是“明天”。正确做法是用实际日期值：<code><th>2024-06-12</th> 或结合 JS 动态渲染。
让温度数字带单位又不破坏表格宽度
直接写 28°C 容易撑开列宽，尤其在小屏上。更稳妥的方式是把单位和数值分层处理：
- 用
<span class="temp-unit">°C</span>包裹单位，CSS 控制font-size: 0.7em和vertical-align: super - 避免在
<td> 里塞 <code><br>换行，改用 CSS 的display: flex; flex-direction: column - 最高温/最低温建议拆成两个
<span></span>，比如<span class="high">28</span><span class="low">19</span>，方便单独配色或加图标 - 用
innerHTML批量写入前，确保字符串已做 HTML 转义，尤其天气描述含“&”“ - IE11 不支持
table.insertRow()在<tbody> 上直接调用，得先取到 <code><tbody> DOM 再操作 <p>表格结构本身简单，难的是数据边界和样式坍塌点——比如某天温度是“35°C（体感41°C）”，括号内容要不要截断、是否允许折行、移动端字体大小是否随屏幕缩放而失真，这些才是真卡点。</p> </tbody>
响应式表格在手机上不横向滚动的实操方案
纯靠 overflow-x: auto 是懒办法，用户要拖拽才能看全，体验差。真正可用的解法是：在小屏下把每行转成卡片式布局，用 <thead> 隐藏，用 <code><tbody> 每个 <code><tr> 内部重构为垂直堆叠结构。
<p>关键 CSS 片段：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;">@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; }
}</pre>
<p>前提是 HTML 中每个 <code><td> 带 <code>data-label 属性，比如 <td data-label="天气">多云</td>。
动态更新天气表格时，DOM 替换 vs 行内更新的选择
如果只是刷新未来 7 天数据，别整个 <table> 替换——重绘成本高，还会闪一下。更轻量的做法是只更新 <code><tbody> 里的 <code><tr>，或者更细粒度到单个 <code><td>。
<p>但要注意两点：</p>
<ul><li>如果某天数据缺失（比如 API 返回空值），不要留空 <code><td>，统一填 <code><td>-</td> 或 <td>暂无</td>，否则表格结构可能错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
