IMG在表格单元格中偏上或居左是因行内元素默认基线对齐；应设td的vertical-align: middle，配合width/height+object-fit: cover统一尺寸，用event.stopPropagation()隔离头像点击事件，并在小屏改用flex响应式布局。
IMG标签在表格单元格里总是偏上或居左？
默认情况下，<img> 是行内元素，会和文字基线对齐，导致在 <td> 里看起来“悬空”或贴左。这不是 bug，是 CSS 默认行为。
解决方法很简单：给 <img> 加 vertical-align: middle，或者把单元格设为 vertical-align: middle —— 后者更稳妥，因为会影响整个单元格内容（比如头像旁还有姓名文本）。
<td style="vertical-align: middle;"><img src="avatar.jpg" width="40"></td>- 避免只给
<img>加display: block，否则它会独占一行，失去与旁边文字的对齐能力 - 如果用了
flex布局（比如td { display: flex; align-items: center; }），记得设justify-content控制水平位置，否则头像仍可能靠左
头像尺寸不一致导致表格行高参差不齐？
不同尺寸的 <img> 会让 <tr> 高度自动撑开，尤其当某行头像没裁剪、宽高比差异大时。
强制统一显示尺寸最可靠：用 width + height + object-fit: cover，并确保父容器（<td>）有明确高度或最小高度。
立即学习“前端免费学习笔记（深入）”；
<img src="a.jpg" width="48" height="48" style="object-fit: cover; border-radius: 50%;">- 不要只设
width不设height，否则缩放后比例失真，且无法约束行高 -
object-fit: cover裁剪居中，contain会留白；若后端返回的是圆角 PNG，border-radius可以直接生效
表格里头像点击跳转却触发了整行响应？
常见于给 <tr> 绑了 click 事件，但用户只想点头像进详情页 —— 结果点哪都跳，还干扰头像本身的 onclick。
关键在事件捕获阶段拦截：给 <img> 的事件加 event.stopPropagation()，同时确保 <tr> 的监听器别用 onclick 写在 HTML 里（不易维护）。
-
<img src="x.jpg" onclick="viewProfile(event);">→function viewProfile(e) { e.stopPropagation(); /* ... */ } - 如果用现代写法，推荐
tr.addEventListener('click', handleRowClick)+img.addEventListener('click', handleAvatarClick)，天然隔离 - 注意移动端点击区域太小：给
<td>加padding或用伪元素扩大点击热区，别只依赖图片本身
响应式表格里头像被压缩变形或换行错位？
小屏下 <table> 宽度超限，浏览器会缩小整个表格，导致头像模糊、文字挤成一团，甚至 <td> 换行把头像和名字拆开。
与其强行适配，不如在窄屏改用块状布局：用 @media 把 <table> 切换为 display: block，每个 <tr> 改成 display: flex 或堆叠排列。
@media (max-width: 768px) { table { display: block; } tr { display: flex; flex-direction: column; } }- 别依赖
table-layout: fixed强控列宽，它在小屏下反而加剧溢出 - 真正要保留表格语义（如屏幕阅读器）时，优先用
aria-label补充头像含义，而不是塞冗余文字
头像对齐看着简单，实际牵扯到行内布局、尺寸控制、事件流和响应式断点四个层面。最容易被忽略的是：没设 vertical-align 就直接调 object-fit，结果头像居中了，文字却吊在半空。
