table不适合做侧边栏菜单，因其语义错乱（将导航误读为数据表）、响应式失效（固定宽度难适配移动端）、无法支持独立滚动与sticky定位、且破坏可访问性（屏幕阅读器无法识别导航语义）；现代应采用flex布局实现。
table 不适合做侧边栏菜单 —— 它会让布局僵硬、语义错乱、响应式难做，且现代浏览器中已不推荐用表格实现页面布局。
为什么 table 布局在侧边栏场景下容易出问题
表格布局本质是为「行列对齐的数据」设计的，而侧边栏是功能型导航容器，需要独立滚动、动态收起、语义清晰、可访问性强。用 table 强行拆分会导致：
-
td宽度固定难适配不同屏幕（比如移动端需隐藏侧边栏，colspan逻辑立刻崩） - 无法给侧边栏单独加
overflow-y: auto，长菜单会撑爆整个表格行高 -
table自动触发新的层叠上下文，导致position: sticky在侧边栏内失效 - 屏幕阅读器会把菜单读成“表格数据”，而非“导航区域”，
aria-current和nav语义全丢
display: flex 替代 table 的实操写法
用 flex 实现左侧固定宽度 + 主内容自适应，代码更短、行为更可控：
<div class="layout">
<aside class="sidebar"><nav><ul>
<li><a href="/" aria-current="page">首页</a></li>
<li><a href="/docs">文档</a></li>
</ul></nav></aside><main class="main-content">...</main>
</div>
CSS 关键点：
- 父容器设
display: flex+min-height: 100vh（不是height: 100%，否则子元素高度计算失败） - 侧边栏加
flex: 0 0 240px（不伸展、不收缩、固定宽） - 主内容加
flex: 1+overflow-y: auto（防内容溢出，同时允许内部滚动） - 去掉所有
float、position: absolute或table相关规则
如果必须兼容老浏览器（IE11），怎么绕开 table 又保功能
IE11 不支持 position: sticky，但支持 flex（需加 -ms- 前缀）。此时仍应避免 table，改用：
-
display: -ms-flexbox+-ms-flex: 0 0 240px（IE11 兼容写法） - 侧边栏用
position: fixed+top: 0+left: 0（需手动控制main的margin-left，但比table更易维护） - 用
@supports not (position: sticky)检测并降级，而不是默认 fallback 到table
真正麻烦的从来不是“怎么让菜单出现在左边”，而是“怎么让它在滚动时还留在视野里、在小屏时能收起来、被键盘和读屏器正确识别”。这些事，table 一个都做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
