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