浏览器规范禁止在<tr>内直接嵌套标签，因其只允许<td>或<th>子元素；强行嵌套会导致DOM错乱、浏览器自动修复、点击失效等问题。
tr 里不能直接放 <a> 标签的原因
浏览器规范明确禁止在 <tr> 内直接嵌套 <a> —— 因为 <tr> 是表格行容器，只允许包含 <td> 或 <th>。强行写成 <tr><a href="..."><td>...</td></a></tr> 会导致 DOM 结构错乱，部分浏览器会自动“修复”（比如把 <a> 提到 <tr> 外），点击区域失效或样式错位。
用 CSS 把 <td> 变成可点击区块
最稳妥的做法是让每个单元格撑满整行，并包裹链接。关键点在于清除默认 padding、设置 display: block 和宽高继承：
<tr> <td><a href="/detail?id=123" style="display: block; padding: 12px; text-decoration: none; color: inherit;">订单 #123</a></td> <td><a href="/detail?id=123" style="display: block; padding: 12px; text-decoration: none; color: inherit;">2024-05-20</a></td> </tr>
-
display: block让链接填满<td>，点击任意位置都生效 -
color: inherit避免链接文字颜色和表格文本不一致 -
text-decoration: none消除下划线，保持表格视觉统一 - 所有
<td>都要加相同样式，否则点击热区不连续
用 JavaScript 绑定整行点击事件更灵活
当需要动态跳转、带参数校验或兼容老版本 IE 时，直接监听 <tr> 更干净：
<tr data-href="/detail?id=123" onclick="location.href=this.dataset.href"> <td>订单 #123</td> <td>2024-05-20</td> </tr>
- 用
data-href存地址，避免内联 JS 过于耦合 - 注意：如果
<td>里有按钮、复选框等可交互元素，需阻止事件冒泡，否则点按钮也会跳转 - 移动端要加
cursor: pointer和user-select: none防止长按触发复制
为什么不用 pointer-events: none + 覆盖层？
有人尝试在 <tr> 上绝对定位一个透明 <div> 覆盖整行——这看似简单，但实际容易出问题：
立即学习“前端免费学习笔记（深入）”；
- 覆盖层会拦截所有子元素事件（比如
<input>失去焦点、<select>无法展开） - 响应式表格中，
<tr>高度可能由内容撑开，覆盖层高度难同步 - 屏幕阅读器无法识别该区域为可点击链接，无障碍支持差
真正麻烦的不是怎么让行变可点，而是怎么让它“像链接一样可靠”：能右键复制地址、能中键新标签打开、键盘 Tab 可聚焦、屏幕阅读器能读出目标页描述——这些细节决定了用户是否真的觉得“这一行就是个链接”。
