正确做法是在<td>内直接嵌套<a>标签，如<td><a href="/user/123">查看用户</a></td>；若需整格点击，用CSS设a为block并占满单元格；链接内可含strong、br等内联元素，不可嵌套div等块级标签。
直接在 <td> 里嵌套 <a> 标签就行
HTML 表格单元格本身不禁止放任何内联元素，<a> 就是标准的内联标签，直接写进去就能点击跳转。不需要额外包裹 <div> 或改写表格结构。
常见错误是把 <a> 放在 <td> 外面，比如：<a href="xxx"><tr><td>...</td></tr></a> —— 这会导致 HTML 结构非法，浏览器可能自动修正或渲染异常。
-
<td><a href="/user/123">查看用户</a></td>✅ 正确 -
<a href="/user/123"><td>查看用户</td></a>❌ 错误：<a>不能包裹表格行/单元格级块级语义元素 - 如果想整格可点，保留
<a>在<td>内，再用 CSS 控制a占满（见下一条）
让整个单元格响应点击：用 CSS 把 <a> 拉满
默认 <a> 是内联元素，只包裹文字区域，鼠标必须精准悬停在文字上才触发。要实现“点哪都跳”，得让它撑满 <td>。
关键不是改 HTML，而是加一行 CSS：
立即学习“前端免费学习笔记（深入）”；
td a {
display: block;
width: 100%;
height: 100%;
padding: 8px; /* 可选，保持内边距 */
}注意：如果 <td> 有 padding，a 的 height: 100% 才能生效；否则可能漏掉边缘区域。更稳妥的做法是直接给 a 设 padding，而非依赖百分比高度。
链接内容含换行或复杂结构怎么办？
<a> 允许包含内联元素，但不能塞 <div>、<p> 等块级标签（HTML5 中部分宽松，但会破坏表格语义和样式流）。
- ✅ 可以：
<td><a href="x"><strong>订单#123</strong><br><small>待发货</small></a></td> - ❌ 不建议：
<td><a href="x"><div>多行内容</div></a></td>——<div>在<a>里会触发浏览器重排，且某些老版本解析不稳定 - 替代方案：用
<span>+display: block模拟块行为，语义更干净
跳转后返回原表格页，怎么保留滚动位置？
纯 <a href="xxx"> 是完整页面跳转，返回时浏览器一般能恢复滚动位置（取决于 history API 和缓存策略），但不绝对可靠。如果表格很长、交互频繁，别依赖这个。
- 强制保留：给链接加
rel="noreferrer"可能干扰部分浏览器的 back cache，慎用 - 更稳的方式是用 JavaScript 控制：
<a href="#" onclick="location.href='/detail/456'; return false;">详情</a>—— 但失去右键“在新标签打开”能力 - 真正需要精确控制的场景（比如分页表格中的详情跳转），应考虑 SPA 路由或
fetch+ 局部刷新，而不是纯 HTML 链接
表格里的链接看着简单，但一旦涉及整格点击、多行内容、返回状态，CSS 层叠和 DOM 嵌套细节就容易翻车。别图省事把 <a> 往外挪，也别在它里面硬塞块级标签——先跑通语义，再调样式，最后补交互逻辑。
