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