<table>不适合后台界面排版，因其在滚动、响应式和语义化三方面易出错：内容区无法独立滚动，侧边栏易失效，height计算无效，fixed定位兼容性差；仅适用于静态、无滚动、固定高度的轻量页。
纯用 <table> 做后台界面排版，不是不能做，而是容易在滚动、响应式、语义化三方面翻车——尤其当内容区要独立滚动时，<table> 会强行把整个表格撑满视口，导致侧边栏也被拖动或截断。
为什么 <table> 在后台布局里容易错位
表格的默认行为是「整体对齐」：一旦某行内容高度超出，整张表就会变高，position: fixed 的侧边栏立刻失效；更麻烦的是，<table> 无法对单个 <td> 设置 overflow-y: auto，所以内容区滚动必须靠 <body> 或外层容器，结果就是侧边栏跟着页面一起滚。
- 常见错误现象：
<td class="content">里塞了 50 行数据，但滚动条出现在浏览器窗口边缘，侧边栏消失或被遮挡 - 根本原因：表格单元格不参与 flex/grid 布局流，也不响应
vh单位计算，height: calc(100vh - 48px)在<td>上无效 - 兼容性影响：IE11 及以下能渲染，但 Safari 对
<table>内fixed定位支持极差，几乎必崩
<table> 唯一可用的后台结构场景
只适合静态、无滚动、固定高度的轻量管理页，比如监控看板或配置摘要页——此时可安全用 <table> 控制列宽比例，且不用管 overflow。
- 头部用
<tr><td colspan="2">，确保占满一行 - 侧边栏列设
width: 200px（不要用百分比），内容列用width: auto或width: calc(100% - 200px) - 必须加
table { border-collapse: collapse; }，否则默认边框间距会让宽度失控 - 禁止在
<td>里嵌套position: fixed元素——它会被表格容器裁剪
想让 <table> 内容区可滚动？换思路，别硬扛
真要滚动，就别把滚动逻辑塞进 <table>。把 <table> 当纯展示容器，滚动交给内部 <div>。
立即学习“前端免费学习笔记（深入）”；
- 结构上：在内容
<td>里包一层<div class="scroll-container"> - CSS 上：
.scroll-container { height: calc(100vh - 48px); overflow-y: auto; }（注意：这个 height 是相对于<td>的，所以<td>得先设height: 100%，而父<tr>和<table>都得设height: 100%） - 风险点：Chrome 下可能触发双滚动条，Safari 下
calc()在<td>里计算不准，建议改用 JS 动态设高 - 更稳方案：放弃
<table>，用display: table的 div 模拟表格行为，这样既能控宽，又能自由加 overflow
真正卡住后台布局的，从来不是“怎么写”，而是“谁负责高度计算”。<table> 把高度控制权交给了内容本身，而现代后台需要的是顶部导航、侧边栏、内容区三者各自守界——这点上，<table> 天然缺位。
