display: inline-table 不能直接用于 <table> 元素，因为浏览器 UA 样式强制其为 display: table，且旧版 Safari、IE 会忽略 inline-table 设置；可靠方案是用 <div> 模拟表格结构并设 display: inline-table。
为什么 display: inline-table 不能直接用在 <table> 上？
因为浏览器对 <table> 元素有默认的 UA 样式，强制设为 display: table，且部分浏览器（如旧版 Safari、IE）会忽略对 <table> 直接设置 inline-table 的尝试。更可靠的做法是用普通块级元素（如 <div>）模拟表格结构，并手动指定 display: inline-table。
用 <div> 模拟表格并设为 inline-table 的写法
核心是放弃原生 <table>，改用语义中性容器，再通过 CSS 模拟表格行为：
<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>
对应 CSS：
.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; }
-
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> 的关键差异与取舍
inline-table 是 CSS 表格模型的一部分，不是 HTML 表格语义的替代品：
- 无障碍支持弱：屏幕阅读器不会识别
div+display: table-cell为表格，缺失表头关联、行列导航等能力 - 响应式难处理：没有
<colgroup>、<thead>等语义结构，min-width和width行为不如原生稳定 - 真正需要“行内排列”的场景其实很少——多数时候是想让多个小数据块横向排列，用
display: inline-flex或display: grid（配合inline-grid）反而更简单、兼容更好
真要用 inline-table，就别混用原生 <table>；真要语义化，就老实用 <table> + float 或 inline-block 包裹——inline-table 是个窄口径工具，不是通用解法。
