表格中图标与文字挤在一起的根本原因是td默认按基线对齐导致descender空隙，解决方法是用flex布局（display:flex的包裹div）、align-items:center、gap控制间距，并设图标min-width:0和显式尺寸。
表格里图标和文字挤在一起怎么办
根本原因是 <td> 默认不处理内联元素的垂直对齐，图标作为 <code><img> 或 inline SVG 会按基线（baseline）对齐，下方留出 descender 空隙，导致看起来“悬空”或上下不对齐。
- 最直接解法：给图标加
vertical-align: middle或top，比bottom更稳，middle对多数小图标效果最自然 - 如果图标是 SVG，建议统一设
display: block+margin: auto，再用父<td> 的 <code>text-align: center控制水平位置，彻底脱离基线干扰 - 避免在
<td> 里混用 <code>float和图标——浮动会触发布局脱离，后续文字可能错位，且无法响应式收缩 - 别依赖
line-height拉高整行来“撑开”对齐空间，这会让纯文字行也变高，破坏表格节奏 - 必须把
display: flex加在<td> 内部的包裹 <code><div> 上，不是直接加在 <code><td> 上（否则影响表格整体计算） <li> <code>align-items: center垂直居中，gap: 8px控制图标与文字间距，比写margin-right更干净、不冲突 - 图标设固定尺寸（如
width: 16px; height: 16px），并加flex-shrink: 0，防止小屏下被压缩变形 - 文字部分用
flex-grow: 1占满剩余宽度，避免短文本时右侧留白；若需换行，加white-space: normal和overflow-wrap: break-word - 禁用
table-layout: fixed—— 它会冻结列宽，让overflow-wrap失效；改用默认auto布局，靠内容撑宽 - 给含图标的
<td> 设 <code>min-width: 0，这是 flex item 能正常收缩的前提，否则它会按图标+文字总宽度硬撑 - 图标用
max-width: 100%+height: auto，文字用font-size: 0.85em+color: #666弱化次要信息 - 绝对不要给
<td> 加 <code>white-space: nowrap，这是横向滚动的头号推手SVG 图标直接内联时的编码与尺寸陷阱
直接写
<svg></svg>标签进<td> 看似轻量，但容易因属性缺失导致渲染异常或尺寸失控。 <ul> <li>必须显式声明 <code>width和height（哪怕只是16），否则不同浏览器可能按 viewBox 自动缩放，造成对齐飘移 - 删掉所有
xmlns属性——HTML5 中非必需，反而增加体积和解析负担；保留viewBox即可 - 避免用
fill="currentColor"依赖继承色，而应在父<td> 或文字容器上设 <code>color，否则图标色可能随 hover 变化而意外突变 - 如果图标需要响应式缩放，用
em单位（如width: 1em），而不是像素，让它随文字大小联动
表格里图标和文字真正难的不是“怎么放”，而是“怎么不让它在不同设备、不同数据长度、不同缩放比例下突然错位”。
用 flex 布局让图标+文字在单元格里真正可控
现代表格中，<td> 内部用 <code>display: flex 是唯一能同时解决对齐、间距、缩放三重问题的方式，尤其适合带状态图标（✅/❌/⚠️）或操作按钮的场景。
移动端窄列下图标+文字强制单行不溢出
表格在手机上横向滚动，90% 是因为图标+文字没做断点控制。关键不是隐藏，而是让内容主动适应窄列。
flex + min-width: 0 + 显式尺寸控制，这三者缺一不可。
