display: inline-table 不能直接用于 元素，因为浏览器 ua 样式强制其为 display: table，且旧版 safari、ie 会忽略 inline-table 设置；可靠方案是用 模拟表格结构并设 display: inline-table。
为什么 display: inline-table 不能直接用在 <table> 上？
<p>因为浏览器对 <code><table> 元素有默认的 UA 样式，强制设为 <code>display: table，且部分浏览器（如旧版 Safari、IE）会忽略对 <table> 直接设置 <code>inline-table 的尝试。更可靠的做法是用普通块级元素（如 <div>）模拟表格结构，并手动指定 <code>display: inline-table。
用 <div> 模拟表格并设为 <code>inline-table 的写法
<div> 模拟表格并设为 <code>inline-table 的写法
核心是放弃原生 <table>，改用语义中性容器，再通过 CSS 模拟表格行为：
<pre class="brush:php;toolbar:false;"> <div class="inline-table">
<div class="table-row">
<div class="table-cell">姓名</div>
<div class="table-cell">年龄</div>
</div>
<div class="table-row">
<div class="table-cell">张三</div>
<div class="table-cell">28</div>
</div>
</div></pre>
<p>对应 CSS：</p>
<pre class="brush:php;toolbar:false;">.inline-table { display: inline-table; border-collapse: collapse; }
.table-row { display: table-row; }
.table-cell { display: table-cell; padding: 4px 8px; border: 1px solid #ccc; }</pre>
<ul>
<li>
<code>border-collapse: collapse 必须加在 inline-table 容器上，否则边框会双倍间距
.table-cell 需显式设 display: table-cell，否则默认是 block，不参与表格布局vertical-align 在 inline-table 外部生效——它只对 inline-table 本身起作用（比如让多个 inline-table 垂直对齐）多个 inline-table 并排时的常见错位问题
如果页面里放了几个 inline-table，它们可能因换行、空白符或字体基线导致上下错位：
- HTML 中的换行和空格会被渲染为一个空格，可能撑开间隙——建议把容器标签写成一行，或用
font-size: 0抑制空白符宽度（父容器设，再在子元素里重置font-size） -
vertical-align: middle加在.inline-table上比默认的baseline更可控 - 如果内容高度差异大（比如某行有两行文本），
inline-table默认按文字基线对齐，看起来像“悬空”——此时必须配vertical-align: top或middle
和原生 <table> 的关键差异与取舍
<p><code>inline-table 是 CSS 表格模型的一部分，不是 HTML 表格语义的替代品：
- 无障碍支持弱：屏幕阅读器不会识别
div+display: table-cell 为表格，缺失表头关联、行列导航等能力
- 响应式难处理：没有
<colgroup></colgroup>、<thead> 等语义结构，<code>min-width 和 width 行为不如原生稳定
- 真正需要“行内排列”的场景其实很少——多数时候是想让多个小数据块横向排列，用
display: inline-flex 或 display: grid（配合 inline-grid）反而更简单、兼容更好
真要用 inline-table，就别混用原生 <table>；真要语义化，就老实用 <code><table> + <code>float 或 inline-block 包裹——inline-table 是个窄口径工具，不是通用解法。
div+display: table-cell 为表格，缺失表头关联、行列导航等能力<colgroup></colgroup>、<thead> 等语义结构，<code>min-width 和 width 行为不如原生稳定
display: inline-flex 或 display: grid（配合 inline-grid）反而更简单、兼容更好真要用 inline-table，就别混用原生 <table>；真要语义化，就老实用 <code><table> + <code>float 或 inline-block 包裹——inline-table 是个窄口径工具，不是通用解法。
