用做后台布局必然错位，因其高度由内容决定，无法满足导航定高、侧边栏固定、内容区自适应的现代需求；应改用display: table系列值或flex/grid实现语义与功能分离。
纯用 <table> 做后台管理系统布局，几乎必然错位——不是写法错，是它根本没设计来干这事。<h3>为什么 <code><table> 在后台界面里一定会错位<p>表格的渲染逻辑和后台管理需求天然冲突：它把所有 <code><td> 当作“必须对齐的一整行”，一旦内容区数据变多、高度上涨，整个 <code><table> 就被撑高，<code>position: fixed 的侧边栏立刻失效；更麻烦的是，<td> 不响应 <code>height: calc(100vh - 48px)，你设了也白设。
<td class="content"> 里塞了 50 行数据？滚动条只会出现在浏览器窗口边缘，侧边栏跟着滚走或被遮挡<li>Safari 对 <code><table> 内 <code>fixed定位支持极差，IE11 下更不可靠-
table-layout: fixed能控列宽，但控不了高度流，而现代后台需要的是「导航、侧边栏、内容区」三者各自守界 - 外层
<div class="layout" style="display: table; width: 100%; height: 100vh;"><li>侧边栏 <code><div style="display: table-cell; width: 240px; vertical-align: top;"><li>内容区 <code><div style="display: table-cell; width: auto; vertical-align: top;"><li>在内容区内部再套一层 <code><div class="scroll-container">，并设 <code>height: calc(100vh - 48px); overflow-y: auto;这样既继承了表格对列宽的稳定控制，又让每个区域能独立参与 flex/grid 流、响应视口单位、支持 overflow。
立即学习“前端免费学习笔记（深入）”；
如果非要用原生
<table>，只限这三种场景<p>不是不能用，而是必须接受它的能力边界。以下情况可安全使用：</p> <ul> <li>静态监控看板：无滚动、无动态加载、高度固定（比如展示 6 行服务器状态）</li> <li>配置摘要页：内容极少，<code><tbody> 不超过 10 行，且不需响应式缩放<li>导出报表预览：仅用于打印或 PDF 导出，用户不操作、不滚动、不缩放</li> <p>即便如此，也必须加 <code>table { border-collapse: collapse; }，侧边栏列用width: 240px（禁用百分比），内容列用width: calc(100% - 240px)，且严禁在<td> 里嵌 <code>position: fixed元素——它会被表格容器裁剪。最容易被忽略的错位点：高度计算权归属
真正卡住后台布局的，从来不是“怎么写标签”，而是“谁负责高度计算”。
<table> 把高度控制权完全交给内容自身；而现代后台要求顶部导航定高、侧边栏撑满视口、内容区填满剩余空间——这个链条里，<code><table> 缺失中间任意一环都会断掉。用 <code>display: grid或flex才能把高度分配逻辑收回来，而不是赌内容刚好不撑开。
真要兼容滚动 + 固定侧边栏，得换容器语义
放弃 <table> 标签本身，但保留它的列宽控制能力：用 <code>div 模拟表格行为，即 display: table 系列值。
