真正高效且语义正确的HTML简历分栏做法是用display: flex或grid配合语义化标签，左侧放联系信息/技能等静态模块，右侧放教育/工作等线性内容，结构清晰、响应式可控、屏幕阅读器友好。
HTML 简历做左右分栏，table 是错的起点，float 是过时的坑，真正高效且语义正确的做法是用 display: flex 或 display: grid 配合语义化标签 —— 左侧放联系信息/技能/证书等静态模块，右侧放教育/工作/项目等线性内容，结构清晰、响应式可控、屏幕阅读器友好。
为什么不能用 table 做简历分栏
简历里没有“行列数据”，强行用 <table> 划分区域会触发三重问题：
<ul><li><code><th> 和 <code><td> 被读屏软件识别为“表格单元格”，把“邮箱”读成“邮箱列第1行”，完全破坏信息层级
<li>加了 <code>cellspacing、width 等属性后，CSS 媒体查询无法可靠覆盖，小屏下两栏直接堆叠错乱或溢出
table 的渲染模型天然不支持，只能推倒重写
flex 实现侧边栏 + 主内容的最小可行写法
这是新手最不容易翻车的方案，兼容 IE10+，代码少、逻辑直：
- 父容器必须设
display: flex，漏掉这句整个布局就失效 - 左侧区域（如联系方式）用
flex: 0 0 240px：不伸展、不收缩、宽固定，比只写width: 240px更稳 - 右侧区域（如工作经历）用
flex: 1，自动吃掉剩余空间；若怕窄屏下太挤，加min-width: 300px - 别在子元素上写
width: 100%或float: left，它们和flex冲突，会导致换行或空白
<div class="resume">
<aside class="sidebar">
<h2>联系方式</h2>
<p>name@example.com</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</aside>
<main class="content">
<h2>工作经历</h2>
<p>2022.06–至今 | 前端工程师</p>
</main>
</div>
.resume { display: flex; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1; }
侧边栏内容该放什么？不是所有信息都适合放左边
左侧空间有限，应只放高复用、低更新频率、非线性的信息块：
- ✅ 推荐：联系方式、技能熟练度表（需用真
<table>）、语言能力、证书列表（含颁发时间）、GitHub/LinkedIn 链接 <li>⚠️ 慎用：工作经历、项目描述、教育背景 —— 这些是纵向流式内容，放右边更符合阅读习惯和 DOM 顺序</li> <li>❌ 禁止：大段自我介绍、长篇技术栈说明、嵌套多层 <code><div> 的“美化区块”，会撑开侧栏、破坏对齐、拖慢加载 <p>特别注意：如果技能要用表格展示（比如“React | 熟练 | 3年”），那个 <code><table> 必须独立存在，带 <code><thead> 和 <code><th>，仅用于该局部数据，不承担整页布局职责。 <h3>响应式切换时最容易忽略的细节</h3> <p>小屏下左右变上下，不能只靠 <code>display: none隐藏一栏 —— 这会让 SEO 和键盘 Tab 流断裂：- 正确做法是在媒体查询里改
flex-direction: column，DOM 顺序保持<aside></aside>在前、<main></main>在后，确保主内容仍优先被读取 - 断点别硬写
max-width: 768px，手机真实 viewport 多在480px–600px，用max-width: 600px更准 - 竖排后，
align-items默认值可能从stretch变成flex-start，导致两侧高度不对齐，可显式补一句align-items: stretch
最后提醒：侧边栏滚动固定（
position: sticky）看似高级，但若父容器没设min-height: 100vh或意外触发了层叠上下文（比如加了transform），它就会失效——这种细节，比写对 flex 属性还容易漏。 - 正确做法是在媒体查询里改
