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