不能用<table>做后台布局，因其语义错误（本用于二维数据展示）、滚动失效（<td>不支持overflow: auto）、响应式崩溃（colspan/rowspan媒体查询下失效）、屏幕阅读器识别错乱（导航语义丢失）；现代推荐grid或flex布局。
别用 <table> 做后台布局——它不是设计来干这个的，硬套会导致滚动失效、响应式崩溃、屏幕阅读器识别错乱。
为什么 <table> 不能当后台布局容器
表格的语义是“展示二维数据”，不是“划分页面区域”。一旦你用 <tr><td> 套 <nav> 和 <main>，问题立刻浮现：
- 侧边栏设
position: fixed，在 Safari 和旧 Edge 里大概率被裁剪或失位 -
overflow: auto写在<td>上基本无效；内容一多，整个表格被撑开，滚动条跑到浏览器窗口边缘 - 媒体查询下
colspan/rowspan行为不可预测，小屏切单列等于重写 HTML - 屏幕阅读器把
<td>当数据单元读，<nav>的语义完全丢失，无障碍直接归零
CMS 后台表格（真·数据表）必须加 <thead> 和 <tbody>
这不是可选项，是 CMS 模板引擎（如 PageAdmin、DedeCMS）解析和注入 JS 功能的前提。漏掉会导致：
- 点击列头排序无反应——JS 找不到语义化的表头结构
-
tbody tr:hover样式不生效，因为选择器匹配失败 - 全选/导出/批量操作按钮无法绑定到正确行范围
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有后台数据表格都显式写出
<thead>和<tbody>，哪怕只有一行数据 -
<th>必须包在<thead>里，不要直接丢进<tr> - 宽度控制写在
<th>的style="width: 120px;"里，别依赖table的width属性或 CSS 类——主题样式容易覆盖
现代后台布局该用 display: grid 还是 display: flex
Grid 是首选，尤其适合固定功能区划分（侧边栏、顶部导航、主内容、状态栏）。Flex 适合局部嵌套（比如顶部内多个按钮对齐），但撑不起整页骨架。
关键配置示例：
.layout {
display: grid;
height: 100vh;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 64px minmax(0, 1fr) 40px;
grid-template-columns: minmax(64px, 200px) 1fr 300px;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; overflow: auto; }
-
minmax(0, 1fr)防止main区域内容少时塌陷 -
sidebar不要设width或flex，Grid 下这些属性会被忽略 - 响应式时，
grid-template-areas名称必须保持一致，否则区域映射错乱
从 <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; }
注意：valign="top" 要换成 align-self: flex-start，原 <td> 的 padding 等样式得挪到对应 <div> 上。
真正卡住后台布局的，从来不是“怎么写标签”，而是“谁负责高度计算”——<table> 把控制权交给了内容，而现代后台需要的是各区域严格守界。这点上，Grid 和 Flex 天然成立，<table> 天生缺位。
