必须用 display: table 系列值（table/row/cell）激活 div 的表格行为，否则仅为普通块级元素；缺任一声明则无法实现行列对齐、边框合并等表格特性。
直接用 <div> 模拟表格，不是“写个 div 就像表格”，而是必须靠 CSS 的 <code>display: table 系列值激活表格行为；否则它只是堆叠的块级元素，和 <table> 完全无关。
<h3>为什么 div 默认不表现得像表格</h3>
<p>浏览器把每个 <code><div> 当作普通块级容器，默认垂直排列、无行列对齐、不共享边框或单元格间距。即使你嵌套三层 <code><div>，只要没加 <code>display: table 相关声明，它就和写三个 <p></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>） <li> <code>display: table-row设在行容器（对应<tr>） <li> <code>display: table-cell设在单元格容器（对应<td> 或 <code><th>） <li>缺任意一个，布局就会退化为普通块级流</li> <h3>基础结构与必要 CSS 声明</h3> <p>最小可行结构只需三层 <code><div> + 三组 display 值，不需要额外类名或 JS： <pre class="brush:php;toolbar:false;"><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></pre> <p>CSS 必须包含：</p> <ul> <li><code>.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 补齐
