不能用做后台页面整体布局，因其语义错位、滚动不可控、高度计算失效、屏幕阅读器误读；应改用display: grid或flex，通过grid-template-areas等明确划分区域并隔离滚动。
别用 <table> 做后台页面整体布局，它只该出现在数据展示区内部；重构核心是把语义错位的结构拉回正轨——导航是 <code><nav></nav>，内容是 <main></main>，滚动必须隔离，区域边界必须可控。
为什么 <table> 布局在后台里会撑高、截断、读不出来<p>表格单元格不参与常规文档流，<code>height: 100vh 在 <td> 上基本无效；侧边栏一旦设了 <code>position: fixed，就会被 <table> 容器裁剪；屏幕阅读器把 <code><tr><td>首页</td></tr> 当成数据行读，而不是导航链接。
常见错误现象包括：
<td class="content"> 里塞了 50 行数据，滚动条却出现在浏览器窗口边缘，侧边栏跟着滚走<li>缩放文字时，<code>colspan单元格内容溢出，但overflow: hidden不生效- 媒体查询下
display: table-cell无法隐藏侧边栏，只能靠visibility: hidden留白
用 display: grid 替换 <table> 的最小改动路径<p>保留原有 HTML 标签结构（比如仍用 <code><header></header>、<nav></nav>、<main></main>），只改 CSS。关键不是“怎么写新代码”，而是“怎么让旧结构听新规则的话”。
立即学习“前端免费学习笔记（深入）”；
必须写的三行 CSS：
.layout { display: grid; grid-template-areas: "header header" "sidebar main"; grid-template-rows: 64px 1fr; grid-template-columns: 240px 1fr; height: 100vh; }
.sidebar { grid-area: sidebar; overflow-y: auto; }
.main { grid-area: main; overflow: auto; }注意点：
-
grid-template-areas中每行引号内列数必须一致，否则整个声明失效 -
grid-area必须写在子元素上，且值要和grid-template-areas中完全匹配（大小写、空格都不能差） - 不要给
.sidebar设width或flex，Grid 下这些属性会被忽略
如果必须保留 <table> 标签（比如 legacy iframe 或 CMS 输出）<p>那就只把它当“容器壳”，不碰它的布局逻辑。真正的滚动、折叠、响应式控制，全交给内部的 <code><div>。<p>典型做法：</p>
<ul><li>在内容 <code><td> 内包一层 <code><div class="scroll-wrap">，然后用 JS 动态设高：<code>el.style.height = window.innerHeight - 48 + 'px';
<td> 加 <code>width="240"（不是 CSS 的 width），防止 IE/旧 Edge 塌陷<td> 里的 <code>position: fixed，改用 position: sticky; top: 0;，兼容性更稳<tr><td colspan="2">，不能拆成两个 <code><td> 再靠 CSS 拼宽<p>真正难的不是写对第一版布局，而是后续加搜索框、折叠菜单、多级弹窗时，<code><table> 会让所有高度计算变成黑盒——你得猜浏览器怎么算，而 Grid 和 Flex 让你能写出确定的结果。</table>
