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