表格中头像应通过flex布局与文字对齐，用display: flex; align-items: center; gap: 12px;约束尺寸并避免撑高行高；需包裹div裁剪圆角、统一缩图、设置onerror兜底；结构须用<thead><tbody>分层，响应式下小屏切column布局。
表格里怎么放头像又不撑开行高
直接用 <img> 塞进 <td> 容易让整行变高，尤其头像尺寸不统一时。关键不是“能不能放”，而是“怎么约束它”。
- 给
<img>加height和vertical-align: middle，比只设width更稳 - 包裹一层
<div style="display: inline-block; width: 40px; height: 40px; overflow: hidden; border-radius: 50%;">，强制裁剪+圆角，避免变形 - 别依赖图片原始尺寸，服务端或构建时统一缩成 80×80 以内，前端只负责展示
头像和文字怎么对齐才不显得松散
常见错误是把名字、部门、职位全塞进一个 <td> 用 <br> 换行——语义弱、换行不可控、移动端容易错位。
- 用
<div>包裹文字块，设display: flex; flex-direction: column; justify-content: center;，配合line-height: 1.2控制间距 - 头像
<img>和文字<div>放在同一个<td>里，外层加display: flex; align-items: center; gap: 12px; - 避免用
padding-top或margin-top调垂直位置，flex 对齐更可靠
表格结构要不要用 <thead> 和 <tbody>
要。不只是语义问题，屏幕阅读器、打印样式、JS 动态操作都依赖这个结构，而且现代 CSS（比如 tbody { display: block; max-height: 400px; overflow-y: auto; }）也要求明确分层。
-
<thead>只放列名，不要塞筛选控件；筛选放表格上方独立区域 -
<tbody>每行<tr>必须有相同数量的<td>，哪怕某列为空也要写<td></td> - 如果员工数据来自 API，渲染前先校验字段是否存在，缺失字段补空字符串，防止
undefined直接进 DOM 导致结构断裂
响应式下头像+资料组合怎么不挤成一团
小屏不是简单缩小字体，而是重新组织信息优先级。头像保留，但文字部分要折叠或换行策略切换。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询：宽度
< 768px时，把头像和文字从flex-direction: row切成column，头像居中，文字左对齐 - 职位这类次要信息，在小屏用
font-size: 0.85em; color: #666;弱化，或用title属性悬停显示 - 避免在
<td>里用white-space: nowrap，否则小屏会横向滚动，宁可让名字换行
onerror="this.src='fallback-avatar.png'"，再配个 alt="员工姓名"。不然空白方块+无提示，排查时连是谁都看不出来。 
