不推荐用<table>做后台管理界面布局，因其破坏语义、可访问性、响应式及交互稳定性；应改用flex或grid实现滚动隔离与焦点控制。
纯用 <table> 做后台管理界面的布局，能跑通，但不推荐——它会把语义、可访问性、响应式和后续交互全部拖进泥潭。
为什么 table 布局在后台系统里容易翻车
表格本意是展示二维数据，不是划分页面区域。强行用 <table> 套 <div>、<p> 甚至 <nav>，会导致：
- 屏幕阅读器无法正确识别导航结构，
aside和main的语义完全丢失 - 媒体查询下
colspan/rowspan会失效，小屏切单列几乎要重写整个 HTML - 侧边栏固定高度或滚动时，
<td>会拉伸或挤压内容，overflow: auto在单元格里行为不可靠（尤其 Safari） - JS 控制折叠/展开时，
<td>宽度计算混乱，常出现“缩回去但留白还在”
如果非要用 table，至少守住这三条底线
真有 legacy 系统或 iframe 嵌套场景必须用 <table>，请按以下硬约束写：
- 头部必须用
<tr><td colspan="2">，不能拆成两个<td>再靠 CSS 拼宽 - 侧边栏
<td>必须设width（如width="200"），不能只靠min-width或百分比，否则 IE/旧 Edge 会塌 - 主内容区
<td>加style="overflow: auto; max-height: calc(100vh - 48px);"，且父<table>要设height: 100vh，否则滚动失效
示例片段：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<table style="height: 100vh; width: 100%;">
<tr><td colspan="2" style="height: 48px;"><header>Header</header></td></tr>
<tr>
<td width="200" style="vertical-align: top;"><nav>Sidebar</nav></td>
<td style="overflow: auto; max-height: calc(100vh - 48px);"><main>Content</main></td>
</tr>
</table>flex 和 grid 替代 table 的最小改动方案
现有 <table> 代码想平滑升级，不用重写 HTML 结构，只需两步：
- 把外层
<table>改成<div class="layout">，保留内部<div class="sidebar">和<div class="content"> - 加这段 CSS：
.layout { display: flex; height: 100vh; }+.sidebar { flex: 0 0 200px; }+.content { flex: 1; overflow: auto; }
注意：原 <td> 里的内边距、垂直对齐等样式要挪到对应 <div> 上，valign="top" 对应 align-self: flex-start。
真正卡住后台布局的从来不是“怎么放两个盒子”，而是滚动隔离、焦点顺序、缩放适配这些细节——table 把它们全交给了浏览器猜，而 flex/grid 让你能明确控制每一像素和每一次 tab 键停顿。
