表格天气图标对齐错位需用flex布局替代vertical-align，统一图标尺寸并禁用max-width，移除table-layout:fixed改auto适配响应式，温度数字用span分层控制样式，并增强语义化与无障碍支持。
表格中天气图标对齐错位怎么办
表格单元格默认垂直居中，但图标+文字混排时容易上下偏移、左右不齐——尤其当图标是 <img> 且未设宽高，或用 SVG 内联时行高不一致。直接加 vertical-align: middle 不够，需配合 line-height 和 padding 控制基线。
-
<td>内统一用display: flex; align-items: center; justify-content: center;替代传统对齐，避免受字体行高干扰 - 图标尺寸统一设为
width: 24px; height: 24px;（或用em基于字号缩放），禁用max-width: 100%导致比例失真 - 若图标来自 CDN 或相对路径，确保
src可访问，否则空白单元格会塌陷，影响整行高度
多时段图标横向铺满但移动端换行混乱
桌面端要 7 天并列，移动端必须单列堆叠，但 table-layout: fixed 会锁死列宽，导致窄屏下图标被压缩或文字折行异常。
- 移除
table-layout: fixed，改用table-layout: auto让浏览器按内容自适应 - 给
<td>设min-width: 80px（含图标+温度文字最小空间），防过度挤压 - 用媒体查询强制移动端重排：
@media (max-width: 480px) { table { display: block; } tr, td { display: block; } }，再配flex-direction: column确保顺序不变
图标与温度数字混排时字号/颜色难统一
同一 <td> 里既有图标又有 “26°C” 文字，直接写死样式易冲突；比如给整个单元格设 font-size: 14px，图标就显得小，放大又撑开行高。
- 把温度数字包在
<span class="temp-num">，单位用<span class="temp-unit">°C</span>单独控制 -
.temp-num设font-weight: bold; font-size: 1.2em;，.temp-unit设font-size: 0.8em; color: #666; - 图标用
<img>时加alt="" aria-hidden="true"，避免无障碍读屏重复播报；若用 SVG，务必带aria-label
表格语义化不足导致无障碍和 SEO 问题
纯 <table> 展示七日天气，屏幕阅读器会逐行列读“第1行：周一、图标、22°/28°…”，但无法识别这是“未来7天预报”，更难跳转到某一天。
立即学习“前端免费学习笔记（深入）”；
- 用
<caption>明确说明用途：<caption>未来七日天气预报</caption> - 每列
<th>加scope="col"，每行首单元格（如“温度”“天气状况”）用<th scope="row"> - 日期单元格用
<time datetime="2026-07-16">周四</time>，确保机器可解析真实日期而非仅显示“周四”
真正麻烦的不是怎么塞图标，而是让图标、数字、文字在各种设备上保持视觉节奏一致——这需要放弃“一行写完所有样式”的惯性，把每个元素当作独立模块去约束。
