必须用 display: table 系列值（table/row/cell）激活 div 的表格行为，否则仅为普通块级元素；缺任一声明则无法实现行列对齐、边框合并等表格特性。
直接用 <div> 模拟表格，不是“写个 div 就像表格”，而是必须靠 CSS 的 display: table 系列值激活表格行为；否则它只是堆叠的块级元素，和 <table> 完全无关。
为什么 div 默认不表现得像表格
浏览器把每个 <div> 当作普通块级容器，默认垂直排列、无行列对齐、不共享边框或单元格间距。即使你嵌套三层 <div>，只要没加 display: table 相关声明，它就和写三个 <p> 一样——上下堆着，没法对齐列宽、没法撑满行高、也没法自动处理 border-collapse。
常见错误现象：<div class="table"><div class="row"><div class="cell">A</div><div class="cell">B</div></div></div>，但 CSS 里只写了 .table { padding: 10px; } ——结果仍是单列、无边框、列宽不一致。
-
display: table必须设在最外层容器（对应<table>） -
display: table-row设在行容器（对应<tr>） -
display: table-cell设在单元格容器（对应<td>或<th>） - 缺任意一个，布局就会退化为普通块级流
基础结构与必要 CSS 声明
最小可行结构只需三层 <div> + 三组 display 值，不需要额外类名或 JS：
立即学习“前端免费学习笔记（深入）”；
<div class="my-table">
<div class="my-row">
<div class="my-cell">姓名</div>
<div class="my-cell">城市</div>
</div>
<div class="my-row">
<div class="my-cell">张三</div>
<div class="my-cell">杭州</div>
</div>
</div>
CSS 必须包含：
.my-table { display: table; width: 100%; border-collapse: collapse; }.my-row { display: table-row; }.my-cell { display: table-cell; padding: 8px; border: 1px solid #ccc; }
注意：border-collapse: collapse 只在 display: table 容器上生效；width: 100% 也只对 table 级容器起作用，对 row 或 cell 设 width 会失效（需用 min-width 或 width 配合 table-layout: fixed）。
响应式 fallback 要手动接管
用 display: table 模拟的表格，**无法直接用媒体查询转成卡片式布局**——因为 display: table-cell 在小屏下设 display: block 后，会丢失所有表格语义（如列对齐、等宽分配），且 data-label 属性不会自动注入。
如果需要移动端卡片效果，必须：
- 给每个
.my-cell添加data-label属性（例如<div class="my-cell" data-label="姓名">张三</div>） - 在媒体查询中重置 display：
@media (max-width: 480px) { .my-row { display: block; margin-bottom: 12px; } .my-cell { display: block; position: relative; } .my-cell::before { content: attr(data-label) ": "; font-weight: bold; } } - 避免依赖
colspan/rowspan：CSS table 不支持display: table-cell的跨行跨列，需改用结构嵌套或 JS 补齐
什么时候该放弃 div 模拟，直接用 <table>
如果你的需求包含以下任意一项，<table> 是更稳妥的选择：
- 需要屏幕阅读器正确识别表头与数据单元格关系（
<th scope="col">vsdata-label的可访问性差距明显） - 要导出 Excel 或打印分页（
<table>的原生语义被多数工具识别） - 列数动态变化且需自动等宽（
table-layout: fixed+ 百分比 width 更可控） - 已有后端模板输出
<table>，强行转 div 增加维护成本
div 模拟表格真正的价值场景，是当你必须把表格逻辑嵌入某个 flex/grid 主布局中，而父容器不允许子元素为 display: table（比如某些 UI 框架的卡片组件），此时用 div + display 表格值是唯一能保持样式隔离又不失对齐能力的方式。其他情况，别为了“不用 table”而硬绕路。
