用做导航条行不通，因为必须嵌套在中且单元格需用/包裹，直接写会因html不合法被浏览器修正或渲染错乱；display: table-row也无法正常撑宽、设置内边距或hover效果；正确做法是用配合flex或inline-block布局。
用 <tr> 做导航条，为什么行不通？
<p>直接用 <code><tr>（表格行）<a style="color:#f60; text-decoration:underline;" title="排列" href="https://m.php.cn/zt/56129.html" target="_blank">排列</a>链接做导航条，浏览器会强制套上表格上下文：单元格必须在 <code><td> 或 <code><th> 里，否则 HTML 不合法；即使强行写成 <code><tr>@#@#@#@#@#@#@#@#@#@0@#@#@#@#@#@#@#@#@#@1
<li>配合 CSS：<code>nav { display: flex; gap: 1rem; } 或 a { display: inline-block; padding: 0.5rem 1rem; }
<table> 包裹导航——屏幕阅读器会读成“一行两列的表格”，干扰用户理解
<h3>如果非要用表格结构（极少数遗留系统）</h3>
<p>仅当后端模板受限、必须输出 <code><table> 时才考虑，但必须补全合法嵌套：
<ul><li>必须有 <code><table>、<code><tbody>、<code><tr>、<code><td> 四层标签
<li>每个链接需包在 <code><td> 里：<code><td>@#@#@#@#@#@#@#@#@#@2</td>
table, td { border: none; padding: 0; margin: 0; }
移动端适配时 <tr> 更不适用
<p>表格行无法自然折行，<code>flex-wrap: wrap 在 <tr> 上无效；而真实导航常需 hamburger 菜单或垂直堆叠，这些都依赖语义容器和现代布局模型。
<p>容易被忽略的一点：用 <code><tr> 做导航，JavaScript 操作 <code>document.querySelectorAll('nav a') 会失效——因为链接实际在 <td> 里，选择器得写成 <code>'table td a'，耦合度陡增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
