table 不该用于后台管理界面布局，因其语义错位、响应式失效、滚动异常、交互成本高；应使用 flex 布局，如 .layout { display: flex; height: 100vh; }，.sidebar { flex: 0 0 240px; }，.main { flex: 1; }。
table 不该用于后台管理界面的布局。
它能“画出格子”，但不是布局工具——用 table 套出侧边栏+顶部栏+内容区，等于把语义、可访问性、响应式和维护性全锁死在 2005 年。
为什么 table 布局在后台系统里会立刻出问题
常见错误现象：table 套三层才对齐侧边栏，colspan 和 rowspan 改一处崩一片；缩放时文字挤出单元格；屏幕阅读器读成“表格第1行第1列：首页”，而不是“导航链接：首页”。
- 语义错位：
table表达的是「数据关系」，不是「区域划分」。侧边栏是<nav>，不是<td> - 响应式失效：媒体查询很难精准控制
table内部单元格的折叠/隐藏，display: table-cell在移动端几乎无法重排 - 滚动行为异常：当主内容区需要垂直滚动时，
table容器会整体撑高，导致侧边栏被截断或滚动条出现在错误位置 - JS 交互成本高：动态增删菜单项需操作
tr/td节点，比操作ul+li多 3 倍 DOM 操作量
flex 布局怎么写才能稳住侧边栏
最小可靠结构就是三行 CSS：
-
.layout { display: flex; height: 100vh; }—— 父容器必须设height: 100vh，否则flex: 1没参照物 -
.sidebar { flex: 0 0 240px; }——flex: 0 0表示不伸缩不收缩，只占固定宽度 -
.main { flex: 1; }—— 主内容区自动填满剩余空间，且天然支持滚动
注意：240px 不是 magic number，它得和图标尺寸、最小可点击区域（至少 44×44px）匹配；而这些细节，table 根本不参与计算。
如果非要用 table 显示右侧报表怎么办
可以，但仅限于「表格型数据展示」本身——也就是 <main> 或 <section> 内部某一块具体报表，不是整个页面框架。
立即学习“前端免费学习笔记（深入）”；
- 把
table放进语义正确的容器里，比如<section aria-labelledby="user-table-title"> - 加
max-width: 100%和overflow-x: auto，防止宽表撑破布局 - 用
<th scope="col">和<th scope="row">保证可访问性，别只靠视觉样式区分表头 - 避免嵌套
table实现布局——哪怕只是“菜单图标+文字”也别用tr包裹，用flex或grid更轻量
table 当 layout 容器”。 
