<tr>不能做导航条，它只是表格行容器，缺乏交互、焦点和可访问性支持；若必须使用，需用<tr><td><a>结构并手动补足tabindex、role、padding等基础能力。
用 <tr> 做导航条违背语义，但能跑通的最低成本方案
直接说结论：<tr> 本身不能“做”导航条——它只是表格行容器，没有交互、焦点、可访问性支持。强行用它排链接，会丢失键盘导航、屏幕阅读器识别、SEO 权重等基本能力。但如果只是临时 demo、内网老系统兼容需求，或被要求“必须用表格布局”，那得靠 <tr> + <td> + <a> 硬凑，且必须手动补足基础行为。
常见错误现象：Tab 键无法顺序聚焦链接、Enter 或 Space 按下无响应、手机点不到（尤其在 Safari 移动端）、屏幕阅读器读成“表格第1行，共1列”，而非“首页、产品、关于”。
- 所有链接必须放在
<td>内，不能直接塞进<tr> - 给每个
<a>加tabindex="0"才能被键盘聚焦（默认<a href>有，但若用了javascript:void(0)就没了） - 必须加
role="navigation"到包裹表格的父容器（如<div>），否则 ARIA 不认这是导航区 - 避免设置
border-collapse: collapse后又忘了给<td>设padding，否则文字贴边难点击
<tr> 里放链接时，CSS 控制横向排列的关键点
表格默认是纵向堆叠的，但导航需要横排。靠 CSS 强制改 <td> 行为比改 <tr> 更可靠——因为 <tr> 是 display: table-row，没法直接 flex。
- 给
<td>设display: table-cell（保持默认即可），再加vertical-align: middle对齐文字 - 用
white-space: nowrap防止长链接换行断开 - 用
text-align: center统一按钮级视觉节奏（别依赖<tr align="center">，已废弃） - 禁用
<table>的width: 100%，改用max-width: 1200px+margin: 0 auto，否则小屏撑破 viewport
示例片段：
立即学习“前端免费学习笔记（深入）”；
<table>
<tr>
<td><a href="/" tabindex="0">首页</a></td>
<td><a href="/product" tabindex="0">产品</a></td>
<td><a href="/about" tabindex="0">关于</a></td>
</tr>
</table>
移动端点击失效？大概率是 <td> 点击热区太小
桌面端靠 hover，移动端全靠 touch area。表格单元格默认 padding 为 0，手指点不准就白点。这不是 JS 问题，是 CSS 缺失。
-
<td>必须设padding: 0.75em 1.25em（至少 44×44px 物理尺寸） - 别只给
<a>设 padding——它会撑开<td>，但外层没约束时可能溢出或错位 - 加
min-width: 80px防窄屏下文字挤压变形 - 用
@media (max-width: 768px)把<tr>改成display: block，<td>改成display: block，实现垂直堆叠（这是唯一能接受的“表格响应式”做法）
为什么你改了 <tr> 样式却没反应？
因为浏览器对表格元素的 CSS 渲染有硬性限制：<tr> 不支持 flex、grid、float、position: absolute（除非父 <table> 设了 position: relative），甚至 width 和 height 都可能被忽略。
- 想控制宽度？只能通过
<td>的width或min-width间接影响 - 想加背景色？直接写
tr { background: #f0f0f0 }有效，但阴影（box-shadow）会被截断——表格渲染模型不画 box shadow - 想动画？
transform: translateX()可以，但transition: background在部分旧版 Edge 下不触发重绘 - 调试技巧：右键检查元素，看 computed 样式里
display是否仍是table-row—— 如果是，说明你写的display: flex被无视了
真要动态菜单、多级下拉、状态高亮，<tr> 就是死胡同。这时候该切到 <nav> + <ul>，哪怕重写三行 HTML 也比打补丁强。
