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